<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>龙陌的博客</title>
    <meta name="description" content="基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/long-press/assets/style.BL65bImA.css" as="style">
    
    <script type="module" src="/long-press/assets/app.CKtEL6mi.js"></script>
    <link rel="preload" href="/long-press/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/long-press/assets/chunks/framework.Cp_of1Ge.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/theme.hH2tFlJ7.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/PageInfo.vue_vue_type_script_setup_true_lang.9LRWY4ho.js">
    <link rel="modulepreload" href="/long-press/assets/chunks/dayjs.min.BrPrGVY0.js">
    <link rel="modulepreload" href="/long-press/assets/css3_现代web布局_12.md.DzvNLnB9.lean.js">
    <link rel="icon" type="image/svg+xml" href="logo.ico">
    <meta name="author" content="龙陌">
    <meta name="referrer" content="no-referrer">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-4c760b95><!--[--><!--]--><!--[--><span tabindex="-1" data-v-16c53dd7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-16c53dd7> Skip to content </a><!--]--><!----><header class="VPNav" data-v-4c760b95 data-v-0a463f3f><div class="VPNavBar has-sidebar top" data-v-0a463f3f data-v-460dba10><div class="wrapper" data-v-460dba10><div class="container" data-v-460dba10><div class="title" data-v-460dba10><div class="VPNavBarTitle has-sidebar" data-v-460dba10 data-v-ef777607><a class="title" href="/long-press/" data-v-ef777607><!--[--><!--]--><!--[--><img class="VPImage logo" src="/long-press/logo.ico" alt data-v-9cb742f0><!--]--><span data-v-ef777607>龙陌的博客</span><!--[--><!--]--></a></div></div><div class="content" data-v-460dba10><div class="content-body" data-v-460dba10><!--[--><!--]--><div class="VPNavBarSearch search" data-v-460dba10><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key">Meta</span><span class="DocSearch-Button-Key">K</span></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-460dba10 data-v-b298d4fd><span id="main-nav-aria-label" class="visually-hidden" data-v-b298d4fd>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💻 首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/guide/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>💡 指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/tools/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 编程工具</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/utils/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>🔧 常用工具类</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/standard/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>📋 前端规范</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/react/React实战,设计模式与最佳实践/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ React</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/typescript/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ TypeScript</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/css3/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Css3</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/electron/" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Electron</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/long-press/linux/linux%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4" tabindex="0" data-v-b298d4fd data-v-5d92c3a7><!--[--><span data-v-5d92c3a7>⭐ Linux</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-460dba10 data-v-815abbf3><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-815abbf3 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-460dba10 data-v-a0947e71 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-460dba10 data-v-b81df352 data-v-603fa601><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-603fa601><span class="vpi-more-horizontal icon" data-v-603fa601></span></button><div class="menu" data-v-603fa601><div class="VPMenu" data-v-603fa601 data-v-61aada2f><!----><!--[--><!--[--><!----><div class="group" data-v-b81df352><div class="item appearance" data-v-b81df352><p class="label" data-v-b81df352>外观</p><div class="appearance-action" data-v-b81df352><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-b81df352 data-v-34066301 data-v-b6ab5a8a><span class="check" data-v-b6ab5a8a><span class="icon" data-v-b6ab5a8a><!--[--><span class="vpi-sun sun" data-v-34066301></span><span class="vpi-moon moon" data-v-34066301></span><!--]--></span></span></button></div></div></div><div class="group" data-v-b81df352><div class="item social-links" data-v-b81df352><div class="VPSocialLinks social-links-list" data-v-b81df352 data-v-2fe70121><!--[--><a class="VPSocialLink no-icon" href="https://vitepress.vuejs.org/guide/getting-started" aria-label="github" target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://space.bilibili.com/248956095" aria-label target="_blank" rel="noopener" data-v-2fe70121 data-v-39684c0a><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="20" height="20"  viewBox="0 0 512 512" >
    <path fill="currentColor" d="M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z"></path>
  </svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-460dba10 data-v-156ee799><span class="container" data-v-156ee799><span class="top" data-v-156ee799></span><span class="middle" data-v-156ee799></span><span class="bottom" data-v-156ee799></span></span></button></div></div></div></div><div class="divider" data-v-460dba10><div class="divider-line" data-v-460dba10></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-4c760b95 data-v-bc5dff2d><div class="container" data-v-bc5dff2d><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-bc5dff2d><span class="vpi-align-left menu-icon" data-v-bc5dff2d></span><span class="menu-text" data-v-bc5dff2d>归档</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-bc5dff2d data-v-fe28bfa1><button data-v-fe28bfa1>返回顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-4c760b95 data-v-e1756f1c><div class="curtain" data-v-e1756f1c></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-e1756f1c><span class="visually-hidden" id="sidebar-aria-label" data-v-e1756f1c> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>现代web布局</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Web 布局技术演进：了解 Web 布局发展史</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/02" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>现代 Web 布局技术术语</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/03" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局基础使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/04" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的对齐方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/05" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex 属性的基础运用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/06" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/07" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/08" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/09" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>使用 Flexbox 构建经典布局：10 种经典 Web 布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/10" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>10</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-e1756f1c><section class="VPSidebarItem level-0 collapsible" data-v-e1756f1c data-v-b147bcc8><div class="item" role="button" tabindex="0" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><h2 class="text" data-v-b147bcc8>postcss</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b147bcc8><span class="vpi-chevron-right caret-icon" data-v-b147bcc8></span></div></div><div class="items" data-v-b147bcc8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b147bcc8 data-v-b147bcc8><div class="item" data-v-b147bcc8><div class="indicator" data-v-b147bcc8></div><a class="VPLink link link" href="/long-press/css3/postcss/postcss-prefix-selector%E5%A2%9E%E5%8A%A0%E7%BB%9F%E4%B8%80%E4%BD%9C%E7%94%A8%E5%9F%9F" data-v-b147bcc8><!--[--><p class="text" data-v-b147bcc8>postcss-prefix-selector增加统一作用域</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-4c760b95 data-v-308553a0><div class="VPDoc has-sidebar has-aside" data-v-308553a0 data-v-e512d8d8><!--[--><!--]--><div class="container" data-v-e512d8d8><div class="aside" data-v-e512d8d8><div class="aside-curtain" data-v-e512d8d8></div><div class="aside-container" data-v-e512d8d8><div class="aside-content" data-v-e512d8d8><div class="VPDocAside" data-v-e512d8d8 data-v-bca3b04c><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-bca3b04c data-v-ff0b6666><div class="content" data-v-ff0b6666><div class="outline-marker" data-v-ff0b6666></div><div class="outline-title" role="heading" aria-level="2" data-v-ff0b6666>本页目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0b6666><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0b6666> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-ff0b6666 data-v-69d389fc><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-bca3b04c></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e512d8d8><div class="content-container" data-v-e512d8d8><!--[--><!--]--><main class="main" data-v-e512d8d8><div style="position:relative;" class="vp-doc _long-press_css3_%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80_12" data-v-e512d8d8><div><p>通过前面课程的学习，我们可以使用 <code>grid-templte-rows</code> 和 <code>grid-template-columns</code> 设置显式网格轨道数量和尺寸，也可以使用 <code>grid-auto-rows</code> 和 <code>grid-auto-columns</code> 来设置隐式网格轨道尺寸。虽然它们服务的对象有所差异，但是使用方法几乎是相似的，只有个别函数不能用于 <code>grid-auto-rows</code> 和 <code>grid-auto-columns</code> 属性上，比如 <code>repeat()</code> 函数。</p><p>由于能给这些属性设置不同类型的值，因此在定义网格轨道的尺寸的时候就会涉及一些计算，比如 <code>%</code> 、<code>fr</code> 等。除此之外，还有其他的一些值类型，比如 <code>rem</code> 、 <code>em</code> 、<code>ex</code> 、<code>ch</code> 和视窗单位 <code>vw</code> 等，但这里只和大家聊聊 <code>%</code> 和 <code>fr</code> 单位，尤其是 <code>fr</code> 单位的计算。因为其他单位值的计算相对而言要更简单，比如：</p><ul><li><code>rem</code> 是相对于 HTML 根元素（<code>&lt;html&gt;</code> 元素）的 <code>font-size</code> 计算；</li><li><code>em</code> 是相对于元素自身的 <code>font-size</code> 计算；</li><li><code>ex</code> 是相对于它的字体上下文的 <code>x</code> 高度，其中 <code>x</code> 的高度由 <code>font-family</code> 和 <code>font-size</code> 两个因素决定，即它等于特定字体在特定<code>font-size</code> 下的 <code>x</code> 高度；</li><li><code>ch</code> 是基于特定字体下的 <code>0</code> 字形宽度来计算，它也会随字体而变化，一般情况下，它是一个估计值，因为 <code>0</code> 字形的宽度通常是字体的平均字符宽度；</li><li><code>vw</code> 、<code>vh</code> 、<code>vmin</code> 和 <code>vmax</code> 是视窗单位，它是相对于浏览器视窗的宽度和高度来计算的。</li></ul><p>我们先从百分比 <code>%</code> 开始吧！</p><h2 id="网格中百分比的计算" tabindex="-1">网格中百分比的计算 <a class="header-anchor" href="#网格中百分比的计算" aria-label="Permalink to &quot;网格中百分比的计算&quot;">​</a></h2><p>熟悉 CSS 的同学都应该知道，当元素的 <code>width</code> 值是个百分比值时，它是相对于其父容器的 <code>width</code> 计算的；同样，它的 <code>height</code> 值是相对于父容器的 <code>height</code> 计算的。在网格布局中，如果网格轨道的值是一个百分比值时，它的计算是相对于网格容器的 <code>width</code> 或 <code>height</code> 来计算，其中：</p><ul><li>列轨道的百分比（即 <code>grid-template-columns</code> 或 <code>grid-auto-columns</code> 属性的值是百分比值）是相对于网格容器宽度（<code>width</code>）计算，更为严格地说，它是相对网格容器的内联轴尺寸 <code>inline-size</code> 来计算。</li><li>行轨道的百分比（即 <code>grid-template-rows</code> 或 <code>grid-auto-rows</code> 属性的值是百分比值）是相对于网格容器高度（<code>height</code>）计算，更为严格地说，它是相对网格容器的块轴尺寸<code>block-size</code> 来计算。</li></ul><blockquote><p>注意，<code>inline-size</code> 和 <code>block-size</code> 涉及到 CSS 逻辑属性方面的知识，这里不做详细阐述，为了节约时间，减少课程的复杂度，这里只按书写模式 <code>ltr</code> 来举例！</p></blockquote><p>比如下面这个网格，我们显式设置网格容器的 <code>width</code> 和 <code>height</code> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">400</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">  30</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">); </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 等同于 50% 50% */</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><code>grid-template-columns</code> 和 <code>grid-template-rows</code> 分别相对于网格容器的 <code>width</code> 和 <code>height</code> ，可以计算出网格轨道（列轨道和行轨道）尺寸。如下所示：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15d4dc6f2306408abd5a08dedb2d2b9d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/ZEoVxNe" target="_blank" rel="noreferrer">https://codepen.io/airen/full/ZEoVxNe</a></p></blockquote><p>注意，<code>grid-auto-columns</code> 计算等同于 <code>grid-template-columns</code> ；<code>grid-auto-rows</code> 计算等同于 <code>grid-template-rows</code> 。如果将上面示例代码改用 <code>grid-auto-*</code> 得到的结果是相似的：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">400</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">  50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">  30</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 相对于网格容器的 width 计算 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-auto-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;          </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 相对于网格容器的 height 计算 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-areas</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#A31515;--shiki-dark:#98C379;">&quot;col1 col2 col3&quot;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 显式指定列网格轨道数量 */</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>众所周知，当 <code>width</code> 值为 <code>100%</code> 且该元素显式设置了 <code>padding</code> 或 <code>border-width</code> 值时，并且 <code>box-sizing</code> 不是 <code>border-box</code> 时，设置宽度为 <code>100%</code> 的元素就会溢出容器；或者 <code>width</code> 为 <code>100%</code> 的元素碰到外边距 <code>margin</code> 也会引起元素溢出容器：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8772c0f25c20465383c772e95b560621~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>在网格布局中同样会有类似的现象。当网格轨道的值都是百分比值，而且总值是 <code>100%</code> 时，要是加上 <code>gap</code> 设置网格轨道间距，就会造成总值超过网格容器，网格就会溢出。这是因为，网格轨道取值百分比时，它是基于网格容器的大小计算，并不会关心网格容中的其他情况。</p><p>比如上面示例，网格行轨道和列轨道值的总和都是 <code>100%</code> 了，此时网格容器要是设置 <code>gap:20px</code> ，其网格就会溢出网格容器：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">400</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">  30</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">); </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 等同于 50% 50% */</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48ea1ed402694b7fa792e179e53306fb~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/bGMzVgz" target="_blank" rel="noreferrer">https://codepen.io/airen/full/bGMzVgz</a></p></blockquote><p>因此，给网格轨道设置百分比值要尤其小心，<strong>切勿让所有网格轨道都取百分比值</strong> ，因为这样就无法利用 <code>gap</code> 属性，你无法确认所有网格轨道的尺寸值总和不是 <code>100%</code> 。当然，在某些情况下，网格轨道取百分比值还是很有意义的，比如你想保证某条（列或行）网格轨道在网格容器中占一定比例。另外就是，当 <code>fr</code> 不能用于网格沟槽的情况下（注意，<code>gap</code> 属性值不能是带有 <code>fr</code> 单位的值），百比值也可以让 <code>gap</code> 属性有一个良好的值。</p><p>在 CSS 中，当容器子元素宽度总和是 <code>100%</code> 时，要是在任何子元素上设置<code>margin</code> 值，也会造成子元素溢出容器，比如下面这个示例：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-item</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    &lt;!-- 总共有四个 Flex Item --&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">flex-container</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.flex__container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">400</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    flex</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 0</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.flex__item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    margin</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/207390b724944ea7a8b8b68f6b3100a5~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>不过，这一现象在网格中的表现却有所不同。网格轨道的尺寸值总和是 <code>100%</code> ，这个时候在网格项目上设置 <code>margin</code> 值时，并不会致使网格溢出容器，只会让网格项目距所在单元格（或网格区域）四边有一定的间距（<code>margin</code> 值）。它表现出来的现象就像是网格项目向内收缩一样：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 30</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    margin</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e1ccfb815e64acfbb7e8458b0608733~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/BaxMjbL" target="_blank" rel="noreferrer">https://codepen.io/airen/full/BaxMjbL</a></p></blockquote><h2 id="网格中-fr-的计算" tabindex="-1">网格中 fr 的计算 <a class="header-anchor" href="#网格中-fr-的计算" aria-label="Permalink to &quot;网格中 fr 的计算&quot;">​</a></h2><p><code>fr</code> 单位值仅能用于 CSS 网格布局中，即它只用于 <code>grid-template-rows</code> 、<code>grid-template-columns</code> 、<code>grid-auto-rows</code> 和 <code>grid-auto-columns</code> 属性上。它是一种特殊的大小调整方法，可以根据网格容器中可用空间份额比例来调整网格轨道大小。</p><p><code>fr</code> 的工作方式与 <code>flex</code> 中的 <code>auto</code> 非常类似。不过它的计算要比 Flexbox 中的 <code>flex</code> 简单得多。接下来，我们一起来看看它在网格中是如何计算的。</p><p>上一节中，我们聊到了“<strong>网格轨道取百分比值时，很易于造成网格溢出网格容器</strong> ”，比如上面展示的示例：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 30</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e25efb9d4cd94ce79501bb8276c958c0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>正如你所看到的，网格溢出了容器。</p><p>如果我们把示例中的<code>%</code> 单位换成 <code>fr</code> 单位呢：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 30</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>你将看到，使用 <code>fr</code> 单位的网格，即 <code>gap</code> 设置的值为<code>20px</code> 也不会让网格溢出容器：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29d347af74be4ad284157d5a11ced44d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/xxjMOKV" target="_blank" rel="noreferrer">https://codepen.io/airen/full/xxjMOKV</a></p></blockquote><p>再来看一个示例，把<code>grid-template-columns</code> 的 <code>50%</code> （第二列）换成可调节的范围值，而其他的值都换成 <code>fr</code> 单位，比如：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;"> var</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#001080;--shiki-dark:#E06C75;">--col</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">30</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>你会发现，第一列和第三列轨道的大小会随着第二列轨道变化：</p><ul><li>当第二列轨道变大时，第一列和第三列就会变小；</li><li>当第二列轨道变小时，第一列和第三列就会变大。</li></ul><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10946ba807894e31b53945d41681f473~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/NWMoNxa" target="_blank" rel="noreferrer">https://codepen.io/airen/full/NWMoNxa</a></p></blockquote><p>这两个示例都向你展示了 <code>fr</code> 的特性。继续往下，MDN 是这样描述 <code>fr</code> 的：</p><blockquote><p><strong><code>fr</code></strong> <strong>单位代表网格容器中可用空间的一等份</strong> 。</p></blockquote><p>从这个描述中不难发现，网格轨道使用 <code>fr</code> 单位确定尺寸大小的话，该网格轨道就被称为<strong>弹性网格轨道</strong> ，因为它会根据网格容器可用空间对网格轨道进行弹性缩放，看上去有点类似于 <code>flex</code> 的特征。</p><p>网格轨道使用 <code>fr</code> 单位时，一般会按下面公式来计算：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/315892da25114b3bb75fdf965fb50ca2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>公式中所谓的<strong>弹性系数指的就是设置了</strong> <strong><code>fr</code></strong> <strong>单位的值</strong> ，即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间 ÷ 所有网格轨道弹性系数总和</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">// </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">弹性系数指的就是设置了 fr 单位的值</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>接下来，使用一个最基础的示例，来向大家阐述 <code>fr</code> 的功能和计算。</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        CSS is Awesome!</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        W3cplus!</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">img</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> src</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;https://loremflickr.com/200/100?random=1&quot;</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> alt</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">        现代Web布局: CSS Grid Layout!</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    padding</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">10</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>注意，示例中的所有元素的 <code>box-sizing</code> 都是 <code>border-box</code>。</p><p>当<code>grid-template-columns</code> 的值是 <code>repeat(4, min-content)</code> 时：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">min-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">    /* 等同于 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">min-content</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> min-content</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> min-content</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> min-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>所有列网格轨道的尺寸都设置为 <code>min-content</code> 。在 Flexbox 的课程中我们介绍过 <code>min-content</code> 值，放到网格布局中是一样的，它对应的就是所在网格项目最小内容的长度。在我们这个示例中，这个时候网格容器会有一定的剩余空间出现：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/989ad249a92d402483080d7c4b0ee275~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>前面说了，设置了 <code>fr</code> 单位的网格轨道就是弹性网格轨道，它能像 Flexbox 布局中的设置了 <code>flex:auto</code> 的 Flex 项目一样，按照相应的弹性系数来分配空间（在网格中分配的是可用空间）。比如每个列网格轨道都显式设置是 <code>1fr</code> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">4</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>按照 <code>fr</code> 的计算公式，我们可以得知：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤1 »» 网格容器内联轴可用空间 = 800px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤2 »» 总弹性系数 = 1fr × 4 = 4fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤3 »» 每一个fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即 1fr = 800px ÷ 4 = 200px;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>该示例的每个网格列轨道都<strong>将分配到网格容器可用空间的一个等份，即</strong> <strong><code>1fr</code></strong> ，因为我们显式示设置了 <code>grid-template-columns</code> 的值是 <code>repeat(4, 1fr)</code> （相当于 <code>1fr 1fr 1fr 1fr</code>）。根据公式计算，网格每个列轨道尺寸应该都相等，都应该是等于 <code>200px</code> ，即 :</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间 ÷ 所有网格轨道弹性系数总和</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 1fr × 800px ÷ 4fr = 1 × 800 ÷ 4 = 200px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 1fr × 800px ÷ 4fr = 1 × 800 ÷ 4 = 200px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 1fr × 800px ÷ 4fr = 1 × 800 ÷ 4 = 200px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 1fr × 800px ÷ 4fr = 1 × 800 ÷ 4 = 200px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>但事实上并非如此，浏览器计算出来的结果不是你想象的那样，每个列网格轨道尺寸是 <code>200px</code> ，实际计算出来的如下图所示：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1dfc472f412d4d14acbfd681dd172e32~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>造成这种现象，是因为第三列网格轨道触发了最小尺寸的现象（它的最小尺寸是 <code>220px</code>）。简单地说，计算出来的网格轨道尺寸不能小于其内容的最小尺寸（即计算出来的 <code>1fr</code> 尺寸<code>200px</code> 小于<code>min-content</code> 的尺寸<code>220px</code>），即<strong>计算出来的值不能小于 <code>min-content</code></strong> 。</p><p>如果出现这种现象，浏览器会再次进行计算，将多出来的值（<code>220px - 200px = 20px</code>）分配到其他的网格轨道上。也就是说，第三列网格轨道多出来的 <code>20px</code> 要重新分配到另外三个列网格轨道上，此时每一个 <code>fr</code> 就等于 <code>6.667px</code> （<code>20px ÷ 3fr = 6.667px</code> ）。第一、二和四列网格轨道重新计算后的尺寸是：</p><ul><li>第一列网格轨道尺寸：<code>200px - 6.667px = 193.33px</code>；</li><li>第二列网格轨道尺寸：<code>200px - 6.667px = 193.33px</code>；</li><li>第四列网格轨道尺寸：<code>200px - 6.667px = 193.33px</code>。</li></ul><p>这就是为什么浏览器计算出来的第一、二和四列网格轨道尺寸是 <code>193.33px</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f36e07254da0483b9a8f7d0491b57f63~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>浏览器在计算网格轨道的尺寸时是循环遍历的一个过程。要是重新计算出来的网格轨道尺寸小于其最小尺寸，就需要再次按照上面的方式进行计算，直到符合要求为止。</p><p>换句话说，如果计算出来的网格轨道值都大于其所在网格项目中最小尺寸（<code>min-content</code>）时，浏览器就不需要做多次的计算，比如上例中，如果我们把第三列的值换成 <code>2fr</code> ，即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 2</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>此时，总的弹性系数就是 <code>5fr</code> （<code>1fr + 1fr + 2fr + 1fr = 5fr</code>），每个<code>fr</code> 计算出来的值 <code>1fr = 800px ÷ 5fr = 800 ÷ 5 = 160px</code> ，根据公式可以计算出相应列网格轨道尺寸：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间 ÷ 所有网格轨道弹性系数总和</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 1fr × 800px ÷ 5fr = 1 × 800 ÷ 5 = 160px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 1fr × 800px ÷ 5fr = 1 × 800 ÷ 5 = 160px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 2fr × 800px ÷ 5fr = 2 × 800 ÷ 5 = 320px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 1fr × 800px ÷ 5fr = 1 × 800 ÷ 5 = 160px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2282abbd84484e24a94def1a80a53643~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/wvjNWYb" target="_blank" rel="noreferrer">https://codepen.io/airen/full/wvjNWYb</a></p></blockquote><p>在给网格轨道设置尺寸时，你还可以将 <code>fr</code> 单位值和别的单位值混合使用，比如将上例中的第三列网格轨道尺寸设置为 <code>220px</code> ，其他列网格轨道继续设置为 <code>fr</code> 单位值：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>由于第三列网格轨道的尺寸是一个固定值（<code>220px</code>），因此它不是一个弹性网格轨道（即大小是固定不变的，不会因为内容尺寸变大而变大，也不会因内容尺寸变小而变小）。这样一来，它就占去容器可用空间的一部分空间。弹性轨道的可用容器空间就会产生变化，需要在原来的尺寸上减去第三列所占空间，即 <code>800px - 220px = 580px</code> 。相应的每个<code>fr</code> 对应的值就等于 <code>193.33px</code> （<code>580px ÷ 3fr = 193.33px</code> ）：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 1fr 1fr 220px 1fr;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤1 »» 网格容器内联轴可用空间 = 800px - 220px = 580px (第三列网格轨道尺寸是一个固定值，即 220px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤2 »» 总弹性系数 = 1fr × 3 = 3fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤3 »» 每一个fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即 1fr = （800px - 220px） ÷ 3fr = (800 - 220</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3 = 193</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>计算出来的网格列轨道尺寸分别是：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间 ÷ 所有网格轨道弹性系数总和</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 1fr × (800px - 220px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3fr = 1 × 580 ÷ 3 = 193</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 1fr × (800px - 220px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3fr = 1 × 580 ÷ 3 = 193</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 220px，它是一个固定尺寸，不需要计算</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 1fr × (800px - 220px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3fr = 1 × 580 ÷ 3 = 193</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef1b42b2a1af4148830d6e6f2c7302db~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/wvjNReB" target="_blank" rel="noreferrer">https://codepen.io/airen/full/wvjNReB</a></p></blockquote><p>同样的，CSS 的 <code>gap</code> 属性的值也会影响 <code>fr</code> 计算。如果你显式设置了 <code>gap</code> 属性的值，它也会占用网格容器的部分可用空间。比如在上面的示例基础上，你设置了 <code>gap</code> 的值为 <code>20px</code> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>此时，网格容器的可用空间等于 <code>520px</code> （即 <code>800px - 220px - 20px × 3 = 520px</code>），弹性总系数是 <code>3fr</code> ，对应的每个 <code>fr</code> 的值是 <code>173.33px</code> （即 <code>520px ÷ 3 = 173.33px</code> ）：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 1fr 1fr 220px 1fr;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">gap: 20px;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤1 »» 网格容器内联轴可用空间 = 800px - 220px - 20px × 3 = 520px (第三列网格轨道尺寸和网格沟槽会占用网格容器的可用空间</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤2 »» 总弹性系数 = 1fr × 3 = 3fr</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤3 »» 每一个fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即 1fr = （800px - 220px - 20px × 3） ÷ 3fr = (800 - 220 - 20 x 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3 = 173</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>计算出来的网格轨道尺寸就会是：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间 ÷ 所有网格轨道弹性系数总和</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 1fr × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3fr = 1 × 520 ÷ 3 = 173</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 1fr × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3fr = 1 × 520 ÷ 3 = 173</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 220px，它是一个固定尺寸，不需要计算</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 1fr × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 3fr = 1 × 520 ÷ 3 = 173</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed9f58fce30c470faf71c54285b30df5~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/YzLBBXz" target="_blank" rel="noreferrer">https://codepen.io/airen/full/YzLBBXz</a></p></blockquote><p>注意，除了 <code>gap</code> 属性之外，设置非 <code>fr</code> 值的轨道值都会对 <code>fr</code> 计算产生影响，比如示例中的固定单位 <code>px</code> 值。</p><p>前面几个示例向大家展示的是 <code>fr</code> 的值都是整数值，比如 <code>1fr</code> 、<code>2fr</code> ，其实在给网格轨道设置<code>fr</code> 值时也可以是小数值，比如 <code>0.1fr</code> ，<code>1.5fr</code> 等。接下来，通过两个示例来向大家展示 <code>fr</code> 值是带有小数值时如何计算，以及网格容器可用空间是如何分配的。比如下面这个示例：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> .5</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> .5</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>示例中将第一列、第二列和第四列网格轨道都设置为 <code>0.5fr</code> 。通过前面示例我们可以得知，网格容器可用空间是 <code>520px</code> （即 <code>800px - 220px - 20px × 3 = 520px</code> ），弹性系数总值是 <code>1.5fr</code> （即 <code>0.5fr × 3 = 1.5fr</code>）。注意，<strong>弹性系数总值是大于 <code>1</code></strong> <strong>的</strong> 。它的计算过程如下：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 220px 0.5fr;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">gap: 20px;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤1 »» 网格容器内联轴可用空间 = 800px - 220px - 20px × 3 = 520px (第三列网格轨道尺寸和网格沟槽会占用网格容器的可用空间</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤2 »» 总弹性系数 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 3 = 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> (弹性系数总和是大于1的</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤3 »» 每一个fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即 1fr = （800px - 220px - 20px × 3） ÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = (800 - 220 - 20 x 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 346</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.667px</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间 ÷ 所有网格轨道弹性系数总和</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 ÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 173</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 ÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 173</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 220px，它是一个固定尺寸，不需要计算</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 ÷ 1</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 173</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.33px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce88d4d05aa54d7caa98ca16cf2b064c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>该示例的所有弹性列网格轨道总系数是 <code>1.5fr</code> ，它大于 <code>1fr</code> 。网格布局中 <strong><code>1</code> 个 <code>fr</code> （即 <code>1fr</code>）就是 <code>100%</code></strong> 网格容器可用空间，也正因为如此，弹性列网格轨道把网格容器可用空间都按弹性系数分完了，<strong>网格容器也就不会有任何的剩余空间产生</strong>。</p><p>既然弹性总和会有大于等于<code>1</code> 的情况，那也有可能会是小于 <code>1</code> 的情景。在网格布局中，如果弹性网格系数总和小于 <code>1</code> ，那计算 <code>fr</code> 的值就不能再使用前面的计算公式了，它需要按照下面的公式来计算网格轨道尺寸：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be5508b4e1bc4841982f62bd03605ff6~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p><strong>注意，你可以不改变计算公式，只不过当弹性系数小于 <code>1</code></strong> <strong>时，那么</strong> <strong><code>1fr</code></strong> <strong>就是网格容器可用空间</strong> !</p></blockquote><p>比如，我们将列网格轨道的值设置为：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">.3</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> .2</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> .2</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>示例中所有列网格轨道弹性系数总和是 <code>0.7fr</code> （即 <code>0.3fr + 0.2fr + 0.2fr</code>），<strong>它小于 <code>1fr</code></strong> 。根据公式，我们可以计算出相应的列网格轨道尺寸：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.2fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 220px 0.2fr;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">gap: 20px;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤1 »» 网格容器内联轴可用空间 = 800px - 220px - 20px × 3 = 520px (第三列网格轨道尺寸和网格沟槽会占用网格容器的可用空间</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤2 »» 总弹性系数 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> +</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.2fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> +</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.2fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.7fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> (弹性系数总和是小于1的</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤3 »» 每一个fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即 1fr = （800px - 220px - 20px × 3） ÷ 1fr = (800 - 220 - 20 x 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1 = 520px</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 156px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.2fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 104px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 220px，它是一个固定尺寸，不需要计算</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.2fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.2</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 104px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>计算之后的所有列网格轨道的尺寸总和是 <code>584px</code> （即 <code>156px + 104px + 220px + 104px = 584px</code>），即使加上列网格轨道之间的间距，总占用网格容器的空间是<code>644px</code> （<code>584px + 20px × 3 = 644px</code>），都小于网格容器的可用空间 <code>800px</code> 。也就是说，<strong>当所有网格轨道弹性系数（<strong><strong><code>fr</code></strong></strong>）之和小于</strong> <strong><code>1</code></strong> <strong>时，它们将占用小于</strong> <strong><code>100%</code></strong> <strong>的网格容器的可用空间，即网格容器会有剩余空间出现</strong> 。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0320d765d784dd1a3c5010b2e63514c~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>值得注意的是，当网格轨道的弹性系数是一个小于 <code>1</code> 的值时，更易于触及网格轨道最小尺寸的边缘。</p><p>前面我们说过，网格轨道的尺寸最小不能小于其内容的最小尺寸，即 <code>min-content</code> 。一旦触发了，浏览器在计算弹性轨道尺寸时，就会重新遍历网格轨道，有可能会进行多次计算。不同的是，所有网格轨道弹性系数小于 <code>1</code> ，且触发最小尺寸时，浏览器会循环遍历网格轨道，重新计算网格容器的可用空间。比如，将上面示例的 <code>grid-template-columns</code> 值调整为 <code>0.3fr 0.1fr 220px 0.1fr</code>，即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    height</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">.3</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> .1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> .1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>所有弹性列网格轨道的弹性系数总和是 <code>0.5fr</code> ，它小于 <code>1fr</code> ，根据相关公式，我们可以计算出对应的网格轨道尺寸：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 220px 0.1fr;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">gap: 20px;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤1 »» 网格容器内联轴可用空间 = 800px - 220px - 20px × 3 = 520px (第三列网格轨道尺寸和网格沟槽会占用网格容器的可用空间</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤2 »» 总弹性系数 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> +</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> +</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> (弹性系数总和是小于1的</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤3 »» 每一个fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即 1fr = （800px - 220px - 20px × 3） ÷ 1fr = (800 - 220 - 20 x 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1 = 520px</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 156px </span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">  min-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即96</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.58px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 52px &lt; </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">min-content</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">，即89</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.08px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 220px，它是一个固定尺寸，不需要计算</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 52px &lt; </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">min-content</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">，即75</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.38px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>从第一次计算的结果中不难发现，第二列和第四列的计算值都小于其最小尺寸（<code>min-content</code>），此时浏览器将会再次计算网格容器的可用空间。浏览器第一次计算出来的第二列和第四列的值小于它们的最小尺寸（<code>min-content</code>），加上网格轨道尺寸是不能小于其最小尺寸，要是小于最小尺寸，将会取其 <code>min-content</code> 作为对应网格轨道的尺寸。如此一来：</p><ul><li>第二列的<code>min-content</code> 尺寸值等于 <code>89.08px</code> ，浏览器会将该值作为第二列网格轨道尺寸的计算值；</li><li>第四列的 <code>min-content</code> 尺寸值等于 <code>75.38px</code> ，浏览器会将该值作为第四列网格轨道尺寸的计算值。</li></ul><p>根据这些值，浏览器会重新计算出网格容器的可用空间，即 <code>800px - 220px - 20px × 3 - 89.08px - 75.38px = 355.54px</code> 。网格第一列根据公式可以计算出 <code>0.3fr</code> 对应的值，即 <code>0.3 × 355.54px = 106.66px</code> 。</p><p>整个计算过程如下：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">: 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 220px 0.1fr;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">gap: 20px;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤1 »» 网格容器内联轴可用空间 = 800px - 220px - 20px × 3 = 520px (第三列网格轨道尺寸和网格沟槽会占用网格容器的可用空间</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤2 »» 总弹性系数 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> +</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> +</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.5fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> (弹性系数总和是小于1的</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">步骤3 »» 每一个fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即 1fr = （800px - 220px - 20px × 3） ÷ 1fr = (800 - 220 - 20 x 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1 = 520px</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 156px </span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">  min-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即96</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.58px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 52px &lt; </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">min-content</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">，即89</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.08px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 220px，它是一个固定尺寸，不需要计算</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.1</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 520 = 52px &lt; </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">min-content</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">，即75</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.38px</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道尺寸不能小于其内容最小尺寸 </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">min-content</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">当有网格轨道尺寸小于其最小尺寸时，将最小尺寸设置为网格轨道尺寸，浏览器重新计算网格容器的可用空间</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">-----浏览器重新计算网格容器的可用空间------</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格容器的可用空间 = 800px - 220px - 89</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.08px</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> - 75</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.38px</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> - 20px × 3 = 355</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.54px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">每一个fr，即 1fr = (800px - 220px - 89</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.08px</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> - 75</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.38px</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">÷ 1fr = 355</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.54px</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格轨道弹性尺寸 = （网格轨道弹性系数）× 网格容器可用空间</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道1尺寸 = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3fr</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × (800px - 220px - 89</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.08px</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> - 75</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.38px</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> - 20px × 3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">)  = 0</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.3</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> × 355</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.54</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 106</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.66px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> &gt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">  min-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">,</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> 即96</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.58px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道2尺寸 =  </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">min-content</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 89</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.08px</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道3尺寸 = 220px，它是一个固定尺寸，不需要计算</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#C678DD;">网格列轨道4尺寸 = </span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">min-content</span><span style="--shiki-light:#000000;--shiki-dark:#C678DD;"> = 75</span><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.38px</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/497468ee3c9444d385561b65fc7a66e4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/XWqOOpy" target="_blank" rel="noreferrer">https://codepen.io/airen/full/XWqOOpy</a></p></blockquote><p>如果上面的计算公式和过程让你还是对 <code>fr</code> 计算感到困惑，那么你可以尝试着换下面的这种方式来理解 <code>fr</code> 的计算，用你熟悉的 <code>%</code> 知识来理解 <code>fr</code> 。</p><p>简单地说：</p><blockquote><p><strong><code>1</code><strong><strong>个</strong></strong><code>fr</code><strong><strong>（即</strong></strong><code>1fr</code><strong><strong>）就是</strong></strong><code>100%</code><strong><strong>网格容器的可用空间；</strong></strong><code>2</code><strong><strong>个</strong></strong><code>fr</code><strong><strong>（即</strong></strong><code>2fr</code><strong><strong>）是各</strong></strong><code>50%</code><strong><strong>网格容器的可用空间，即</strong></strong><code>1fr</code><strong><strong>是</strong></strong><code>50%</code><strong><strong>网格容器的可用空间。以此类推</strong></strong>，要是你有<code>25</code><strong><strong>个</strong></strong><code>fr</code><strong><strong>（即</strong></strong><code>25fr</code><strong><strong>），那么每个</strong></strong><code>fr</code><strong><strong>（</strong></strong><code>1fr</code>）就是</strong> <strong><code>1/25</code></strong> <strong>或</strong> <strong><code>4%</code></strong> 。</p></blockquote><p>使用饼图可以很形象地描述<code>fr</code>：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90bd56460a144ea6b88badeed11d63b9~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p><strong>注意，一个饼图（圆）就相当于网格容器的可用空间，分割的份数就相当于设置了弹性系数的网格轨道</strong> 。</p><p>无论你是要使用 <code>fr</code> 还是 <code>%</code> 来设置网格轨道的值，都可以按下面的方式来执行：</p><ul><li>①：决定有多少个网格轨道（列或行） ；</li><li>②：进行计算 ；</li><li>③：创建轨道 ；</li><li>④：将数值应用于每个网格轨道 。</li></ul><p>先使用 <code>%</code>。假设网格容器宽度是 <code>800px</code>（在无其他网格属性显式设置之下，这个值也是网格容器的可用空间），并且该网格有四列（为了好区别，给每个网格列轨道分别取个名，比如“<strong>Tom</strong> ”、&quot;<strong>Jack</strong> &quot;、&quot;<strong>Lucy</strong> &quot;和&quot;<strong>Nick</strong> &quot;）。 同时希望列宽相等，而且填充整个网格容器（网格容器可用空间全部用完），那么每列设置的值就是 <code>100 ÷ 4 × 100% = 25%</code>：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">800</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>每列网格轨道宽度都是网格容器可用空间（<code>800px</code>）的 <code>25%</code>，即：<code>800px × 25% = 200px</code>：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a552cdf095142d99097dd0263bf0caf~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/mdLvYME" target="_blank" rel="noreferrer">https://codepen.io/airen/full/mdLvYME</a></p></blockquote><p>后来你决定让其中一列的宽度（比如“Tom”）是其他列的宽度的两倍，即 <code>2x + 1x + 1x + 1x = 100</code>，那么 <code>x</code> 是多少？如果仅仅是粗暴地将“Tom”列设置为 <code>50%</code>，其他依旧是 <code>25%</code>，这样就假设 <code>x = 25%</code> 了：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">50</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>网格“Nick”列轨道溢出了网格容器：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a44debe3a74424297ac992ceb88a95e~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/rNvPgRg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/rNvPgRg</a></p></blockquote><p><strong>前面介绍</strong> <strong><code>%</code></strong> <strong>时说过，网格轨道取值</strong> <strong><code>%</code></strong> <strong>是相对于网格容器宽度计算</strong> 。</p><p>如果我们希望网格轨道不溢出网格容器，就需要重新计算 <code>x</code> 的值，即 <code>2x + 1x + 1x + 1x = 100</code>，就可以算出 <code>x = 100 ÷ 5 = 20</code>，一个 <code>x</code> 就是网格容器可用宽度的 <code>20%</code>，对应的就是<code>160px</code>：</p><ul><li>①：“Tom” 列宽就是 <code>2x = 2 x 20% = 40%</code>；</li><li>②：“Jack”列宽就是 <code>1x = 1 x 20% = 20%</code>；</li><li>③：“Lucy”列宽就是 <code>1x = 1 x 20% = 20%</code>；</li><li>④：“Nick”列宽就是 <code>1x = 1 x 20% = 20%</code>。</li></ul><p>算出每个 <code>x</code> 值之后，需要重新改变每一列的轨道值：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">40</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>重新计算并设置网格列轨道值之后，网格列不会溢出网格容器了，但每列的列宽就变了，但还是保持了“Tom”列宽是其他列宽的两倍：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c19d05ea2f11485396c80c743efafc87~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/NWMoZGL" target="_blank" rel="noreferrer">https://codepen.io/airen/full/NWMoZGL</a></p></blockquote><p>如果说需要再新增一列（比如“<strong>Tony</strong> ”），这样一来网格容器就有五列，且每列网格轨道都是 <code>25%</code>。即：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 25</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>新增的“Tony”列将会溢出网格容器：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce6e8b46f60e4b618aa32c5f0ae89d20~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/QWrYXvY" target="_blank" rel="noreferrer">https://codepen.io/airen/full/QWrYXvY</a></p></blockquote><p>如果不希望新增的列溢出网格容器，那么就需要五列加起来的总数是 <code>100</code>，每列是 <code>100 ÷ 5 = 20%</code>。需要调整每列的宽度：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">%</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>你会发现，网格列轨道的尺寸使用百分比值，在新增或删除一列，或添加网格沟槽，或改变它们的大小，都需要：</p><ul><li>重新计算每一列网格轨道的大小；</li><li>将新的尺寸值重新应用于每列网格轨道。</li></ul><p>而 <code>fr</code> 将改变这一切。同样的，需要创建四列，每一列的宽度是 <code>1fr</code>：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f92b645f8c249cb89b3459d3beba333~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/wvjNLjR" target="_blank" rel="noreferrer">https://codepen.io/airen/full/wvjNLjR</a></p></blockquote><p>我们可以使用饼图来拆分上图中 <code>fr</code> 的计算。把网格容器可用空间（<code>800px</code>）当作是一张饼，它被网格列轨道（“Tom”，“Jack”，“Lucy”和“Nick”）分成了四份（即<code>4</code>个<code>1fr</code>），每份（<code>1fr</code>）等于 <code>1 ÷ 4 = 0.25</code>（即<code>25%</code>）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/591fb0281fde47cc96766a0a893557d5~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>和 <code>%</code> 有点类似，如果你想“Tom”列是其他列的两倍，只需要将这一列设置为 <code>2fr</code>。</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">2</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/583a34bcdd094b1c884175b56e53bb2a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/GRdLqVd" target="_blank" rel="noreferrer">https://codepen.io/airen/full/GRdLqVd</a></p></blockquote><p>同样的，网格容器的可用空间这张饼图（<code>800px</code>）分成了四份，其中“Tom”列是 <code>2fr</code>，等于<code>2</code>个<code>fr</code>，而且是其他列（“Jack”，“Lucy”和“Nick”）的两倍（<code>1fr</code>）。所以<code>1fr</code>的值是<code>1 ÷ 5 = 20%</code>（<code>2fr + 1fr + 1fr + 1fr = 5fr</code>）。因此，“Tom”列的 <code>2fr</code> 是 <code>2/5</code>（<code>40%</code>）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdb39336b49c422186fd73d14e16c91a~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>网格轨道使用 <code>fr</code> 单位时，如果饼图大小改变了（网格容器可用空间改变了），我们也不需要重新调整网格轨道的值：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bf666fd8b53427f9e2ce6617348c71b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>网格容器 <code>.container</code> 从 <code>800px</code> 宽度变到 <code>1200px</code> 时，<code>fr</code> 单位会根据网格容器可用空间自动调整网格项目大小：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2569adb389e2434b989879fd97948532~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/xxjeRye" target="_blank" rel="noreferrer">https://codepen.io/airen/full/xxjeRye</a></p></blockquote><p>同样的原理，即使有网格沟槽的出现（比如 <code>20px</code>），或者新增非 <code>fr</code> 的网格轨道出现（比如“Tony”列列宽是 <code>200px</code>）：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;"> .container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 200</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">     gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> }</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17157b7177e24f56ae252716ac6c1b3b~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/Poegbrp" target="_blank" rel="noreferrer">https://codepen.io/airen/full/Poegbrp</a></p></blockquote><p>正如上图所示，“Tony”列先从饼图中分去 <code>200px</code>，其中网格沟槽占用了 <code>80px</code>（即 <code>20px x 4</code>），整个饼图并不完整了，只剩下 <code>520px</code>（<code>800px - 280px</code>），相当于网格容器可用空间只有 <code>520px</code>。不过，剩下的饼图同样分成了四分，“Tom”、“Jack”、“Lucy”和“Nick” 分到相同的等份，即<code>1</code>个<code>fr</code>（<code>1fr</code>），每个<code>fr</code>是 <code>1/4</code>（<code>25%</code>）。</p><p>如此一来，<code>1fr</code> 可以用两种方式来描述：</p><ul><li><p><strong>用分数表示</strong> ：<code>1fr = 1 ÷ 所有网格轨道弹性系数总和</code>（<code>fr</code>总和）；</p></li><li><p><strong>用百分比表示</strong> ：<code>1fr = 100 ÷ 所有网格轨道弹性系数总和</code>（<code>fr</code>总和）。</p></li></ul><p>用示例来描述的话：</p><ul><li>①：所有网格列轨道是<code>4</code>列，且每列宽都是<code>1fr</code>，那么 <code>1fr = 1 ÷ 4 = 1/4 = 25%</code>，即网格容器可用空间的<code>25%</code>。</li><li>②：设置网格容器可用空间是 <code>800px</code>，那么每个 <code>fr</code> 计算出来的值是 <code>800 x 1/4 = 200px</code>（<code>800 x 25% = 200px</code>）。</li><li>③：如果网格容器新增一列，此时所有网格列轨道就是<code>5</code>，那么 <code>1fr = 1 ÷ 5 = 1/5 = 20%</code>，即网格容器可用空间的<code>20%</code>。</li><li>④：如果设置第一列（或某个列）的宽度是<code>2fr</code>，其他列宽仍然是 <code>1fr</code>，那么<code>fr</code>总和是 <code>2fr + 1fr + 1fr + 1fr + 1fr = 6fr</code>。</li><li>⑤：此时，<code>1fr = 1/6 = 16.6667%</code>，即网格容器可用空间的 <code>16.6667%</code>；第一列是<code>2fr</code>，它的值是 <code>2fr = 2/6 = 33.33%</code>，即网格容器可用空间的<code>33.33%</code>。</li><li>⑥：如果设置第一列宽度是<code>200px</code>，其他列仍然是<code>1fr</code>宽。现在的总数是 <code>200px + 1fr + 1fr + 1fr + 1fr = 200px + 4fr</code>，那么所有列的 fr 总和就是<code>4fr</code>，对应的<code>1fr = 1/4 = 25%</code>，即网格容器可用空间的<code>25%</code>。由于第一列宽度是<code>200px</code>，那么网格容器可用空间就是 <code>800px - 200px = 600px</code>（即网格容器宽度减去第一列列宽）。也就是说，<code>1fr</code>等于网格容器可用空间<code>600px</code>的<code>25%</code>，等于<code>600 x 25% = 150px</code>（即<code>1fr=150px</code>）。</li></ul><p>在 CSS 网格布局中，<code>1fr</code> 的计算大致就是这样的一个过程。</p><h3 id="网格项目中的最小尺寸" tabindex="-1">网格项目中的最小尺寸 <a class="header-anchor" href="#网格项目中的最小尺寸" aria-label="Permalink to &quot;网格项目中的最小尺寸&quot;">​</a></h3><p>不过值得一提的是，<strong>设置</strong> <strong><code>1fr</code></strong> <strong>的网格轨道并不代表着网格轨道的列宽（或行高）都是相等的</strong> 。这个就好比 Flexbox 布局中的 <code>flex</code> 属性，即 <strong>所有设置</strong> <strong><code>flex:1</code></strong> <strong>的</strong> <strong>Flex</strong> <strong>项目并不一定就是相等的（或者说均分容器）</strong>。</p><p>这是因为，它和网格轨道中的内容有着关联。换句话说，<strong>只要内容是灵活的（网格项目大小会随着内容扩大或收缩），一个</strong> <strong><code>fr</code></strong> <strong>单位就是总量的一部分</strong> 。意思是说，<strong>只要网格项目中的内容能够缩放以适合该网格轨道（列或行），设置</strong> <strong><code>1fr</code></strong> <strong>网格轨道的大小就相等</strong> 。</p><p>然而，一旦网格项目内容停止缩放以适应网格轨道，设置 <code>fr</code> 值的网格轨道就会被重新调整，使内容能更好的适配。比如，如果网格布局中有一列具有一个固定宽度的网格项目，该网格列轨道的宽度将永远不会小于这个网格项目的宽度。</p><p>因此，一个具有 <code>1fr</code> 的网格列轨道，其最小值等于内容的最小宽度（即 <code>min-content</code>），其中 <code>min-content</code> 可以是网格轨道中网格项目的一个固定尺寸的元素，比如图片的宽度，也可以是一个文本节点中最长的字。如果这种情况在网格布局中产生的话，那么其他设置 <code>1fr</code> 值的网格轨道就会相应地按比例缩小。</p><p>简单地说：</p><blockquote><p><strong>将所有网格列（或行）轨道的值为</strong> <strong><code>1fr</code></strong> <strong>，并不一定能让所有网格列（或行）轨道相等</strong> 。</p></blockquote><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eafe541c03ca4c7e86ebaba4b2faceb9~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>碰到这种现象并不等于无解，还是可以通过一些技术手段来规避这种现象产生的：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e1b897b96f44161af5808844045bc99~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/eYrovrg" target="_blank" rel="noreferrer">https://codepen.io/airen/full/eYrovrg</a></p></blockquote><p>为了增强大家的理解，我们以上面示例为例，一步一步来阐述。</p><p>这个示例是一个 <code>3 x 1</code> （三列一行）的网格，在 <code>grid-template-columns</code> 属性设置 <code>repeat(3, 1fr)</code> 值，表示三列网格轨道尺寸都是 <code>1fr</code> ：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    inline-size</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1000</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>当网格轨道中的内容（网格项目）的尺寸小于 <code>1fr</code> 时，三列是均等的，达到了均分容器宽度的效果。即 <code>1fr</code> 等于网格容器可用空间（<code>1000px - 20px × 2rem</code> ）的 <code>1/3=33.333%</code> 。</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;container&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h4</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">1fr</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h4</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Tom</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h4</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">1fr</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h4</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Jack</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;item&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h4</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">1fr</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">h4</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">        &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Lucy</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">p</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d43f66268cb442f4b61e182cdd05f1f4~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/zYjXwbe" target="_blank" rel="noreferrer">https://codepen.io/airen/full/zYjXwbe</a></p></blockquote><p>如果你在 “Tom” 列加入一张 <code>480px</code> 宽的图片时，并且样式中没有对 <code>img</code> 设置 <code>max-width: 100%</code> 或者 <code>aspect-ratio</code> 相关的样式（假设没有设置其他与该图片尺寸有关的任何 CSS 样式规则），你将看到的效果如下：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f83fd74faee847baa2a25c008331889f~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/vYjMZLX" target="_blank" rel="noreferrer">https://codepen.io/airen/full/vYjMZLX</a></p></blockquote><p>按照 <code>1fr</code> 的计算方式，在该例中，<code>1fr = 322.67px</code>，而事实上，包含图片的“Tom”列，其列宽度不可能小于 <code>500px</code> ，即 图片的宽度 <code>480px</code> 加上网格项目的内距 <code>10px</code> 。也就是说，“Tom” 列的宽度要比 <code>1fr</code> 计算出来值要更大。即使如此，也不代表着该列的 <code>1fr</code> 就等于 <code>500px</code>，它仅能代表的是该列的列宽现在是 <code>500px</code>（因为该列的最小内容宽度就是 <code>img</code> 的 <code>width</code> 值）。</p><p>同时“Tom”列占用网格容器可用空间中的 <code>500px</code>，相应留给 <code>fr</code> 计算的空间就只剩下 <code>468px</code> （<code>1000px - 500px - 2 × 2rem</code> ，其中<code>1rem</code> 是 <code>16px</code> ），其他两列各占剩余空间的 <code>1fr</code>，即 <code>1fr = 1/2=50%</code>，“Jack” 和 “Lucy” 两例计算出来的列宽约是 <code>234px</code> 。</p><p>如果在网格项目中有长单词，或没有任何连字符（<code>-</code>）和空格的字符，比如一个 URL，也有可能会致使所在网格列轨道变宽（比计算出来的 <code>1fr</code> 值要大）。比如，你 “Tom” 列中的 <code>&lt;img ``/&gt;</code> 换成长字符，你会发现，它所在列轨道也要比其他列宽，即三列不相等：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57a64aff9f734604a9c0d14486a408d0~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/NWMmVRN" target="_blank" rel="noreferrer">https://codepen.io/airen/full/NWMmVRN</a></p></blockquote><p>示例中在 “Tom” 列添加了一个长字单词，其字符形长度大约是 <code>507.74px</code> ，另一个是 URL 地址，在没有中连字符（<code>-</code>）和空格等条件之下，也会被视为一个长字符，其字形长度大约是<code>659.7px</code> 。也就是说，“Tom” 列内容最小尺寸（<code>min-content</code>）就是 URL 地址所用字符长度。</p><p>所以，“Tom” 列的列宽大约是 <code>679.7px</code> （URL 字符长度加上所在网格项目内距，<code>659.7px + 20px</code>），网格容器留给 “Jack” 和 “Lucy” 两列可分的空间就只剩下 <code>288.30px</code> （<code>1000px - 679.7px - 2 × 16px</code> ，共中 <code>1rem</code> 等于 <code>16px</code>），对应的 <code>1fr = 1 / 2 = 50%</code> ，“Jack” 和 “Lucy” 两列的列宽是 <code>144.15px</code> （<code>288.30× 50%</code> ）。</p><p>从这两个示例展示的效果中不难发现，<code>fr</code> 会自动设置<strong>最小值（<strong><strong><code>min-width</code></strong></strong>）</strong> ，这将尊重里面的内容，相当于 <code>min-width</code> 的值为 <code>min-content</code>。对于<code>fr</code>来说：</p><blockquote><p><strong>最小值（<strong><strong><code>min-width</code></strong></strong>）是自动设置的（相当于</strong>**<code>min-content</code><strong><strong>）；最大值（</strong></strong><code>max-width</code>**）就是显式设置的值（比如 <strong><code>1fr</code></strong>、 <strong><code>2fr</code></strong>、 <strong><code>3fr</code></strong> 等）。</p></blockquote><p><code>1fr</code> 的底层实现逻辑其实就是 <code>minmax(auto,1fr)</code> （<code>minmax()</code> 是用来设置网格轨道尺寸一个 CSS 函数），意味着 <code>min=auto</code>（即<code>min-width: min-content</code>），<code>max=1fr</code>。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa1b3da0eeae45e6b79207c4d3aafebb~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/VwxNOqZ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/VwxNOqZ</a></p></blockquote><p>也就是说，如果你真的需要均分列（所有设置 <code>1fr</code> 的列宽相等），就应该使用 <code>minmax(0, 1fr)</code> 来替代 <code>1fr</code> ，将 <code>1fr</code> 的默认<code>min-width</code> 从 <code>min-content</code> （即 <code>auto</code>）重置为 <code>0</code> 。这样就允许网格轨道尺寸保持在 <code>0</code> 至 <code>1f</code> 范围内（最小小到 <code>0</code> ，最大大到 <code>1fr</code>），从而创建保持相等的列。</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24c575f300c942909a22c0251c312aae~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/BaxeByB" target="_blank" rel="noreferrer">https://codepen.io/airen/full/BaxeByB</a></p></blockquote><p>但是，请注意，如果网格轨道中有元素内容最小尺寸大于 <code>1fr</code> 计算出来的网格轨道尺寸时，这将导致内容溢出，比如上面示例中的图片和长字符单词。如果需要避免内容溢出，则需要通过其他的 CSS 来处理，比如在 <code>img</code> 上设置 <code>max-width: 100%</code> ，对长字符设置 <code>word-break</code> 或在包裹它们的网格项目上设置 <code>overflow</code> 的值为 <code>scroll</code> 或 <code>hidden</code> ：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed8c82dff0c2440ebe8e70a27483b1c7~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/eYraOey" target="_blank" rel="noreferrer">https://codepen.io/airen/full/eYraOey</a></p></blockquote><p><code>fr</code> 这个表现行为和 Flexbox 中的 <code>flex:1</code> 有点类似，除了使用 <code>minmax(0, 1fr)</code> 来替代 <code>1fr</code> 之外，可以在网格项目上显式设置 <code>min-width: 0</code> 来达到同等的效果：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">repeat</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">3</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">);</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.item</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88e6f69281e643a69e537a4b66108e01~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/XWqwJRK" target="_blank" rel="noreferrer">https://codepen.io/airen/full/XWqwJRK</a></p></blockquote><p>同样的，对于图像或长字符单词，需要做额外处理，不然会有溢出的可能。</p><p>在 CSS 网格布局中，<code>fr</code> 是一个非常有用的单位，也是 CSS 网格布局中独有的特性。虽然 <code>fr</code> 很强大，但也不能说随时随地都可以使用<code>fr</code>。比如说：</p><ul><li>在<code>calc()</code> 表达式中使用 <code>fr</code> 就无效，因为 <code>fr</code> 的 <code>&lt;flex&gt;</code> 值类型，它和其他 <code>&lt;length&gt;</code>值类型不兼容；</li><li><code>gap</code> 属性中也不能使用 <code>fr</code>，因为 <code>fr</code> 是用来指定网格轨道尺寸的，不是用来指定网格沟槽大小的；</li><li><code>calc()</code> 中使用 <code>var()</code> 和 <code>fr</code> 计算也是一种无效行为，比如 <code>.container{--fr: 2; grid-template-columns: calc(var(--fr) * 1fr)</code>。</li></ul><p><code>fr</code> 有点类似 <code>flex</code>，一般情况都将其视为默认动态单位，可以根据容器可用空间来指定网格轨道。类似 <code>fr</code> 这样的动态单位，特别适用于自适应布局中。比如两列布局，侧边栏固定宽度，主内容自动分割网格容器的可用空间：</p><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.container</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> { </span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-rows</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">auto</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;"> auto</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">220</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;"> 1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;  </span><span style="--shiki-light:#008000;--shiki-dark:#7F848E;--shiki-light-font-style:inherit;--shiki-dark-font-style:italic;">/* 1fr 也可以使用 minmax(0, 1fr) 替代 */</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">    gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">20</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">px</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">; </span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e0785e75418497685f842136fdf24d2~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><blockquote><p>Demo 地址：<a href="https://codepen.io/airen/full/NWMVPBQ" target="_blank" rel="noreferrer">https://codepen.io/airen/full/NWMVPBQ</a></p></blockquote><p>使用 <code>fr</code> 虽然能很好地帮助我们构建 Web 布局的效果，尤其是一些弹性布局的效果，但还是要尽可能地规避其最小值的状况。也就是说，我们在使用 <code>fr</code> 构建一些布局时，可以在网格项目上显式设置 <code>min-width</code> 的值为 <code>0</code> 。这样你的代码更具防御性，你构建的 Web 布局也更健壮。</p><p>比如下面这个文本截取的案例（它属于十大经典 Web 案例之一，介绍 Flexbox 的时候有专门介绍过）：</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b1642549e854b3ab52418657a84ba2d~tplv-k3u1fbpfcp-zoom-1.image" alt="img"></p><p>我们使用 CSS Grid 可以这样来完成：</p><div class="language-HTML vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">HTML</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;target&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;target__title&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">    &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">strong</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">Grid Layout:</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">strong</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> Text here is very very long that it might</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    get truncate if this box get resized too small</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#E50000;--shiki-dark:#D19A66;"> class</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">=</span><span style="--shiki-light:#0000FF;--shiki-dark:#98C379;">&quot;target__emoji&quot;</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">    🎃</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">  &lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&lt;/</span><span style="--shiki-light:#800000;--shiki-dark:#E06C75;">div</span><span style="--shiki-light:#800000;--shiki-dark:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-CSS vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">CSS</span><pre class="shiki shiki-themes light-plus one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.target</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  display</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">grid</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  grid-template-columns</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#795E26;--shiki-dark:#56B6C2;">minmax</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">fr</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">) </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">max-content</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  align-items</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">center</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  gap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">1</span><span style="--shiki-light:#098658;--shiki-dark:#E06C75;">rem</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#800000;--shiki-dark:#D19A66;">.target__title</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">hidden</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  min-width</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#098658;--shiki-dark:#D19A66;">0</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  text-overflow</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">ellipsis</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#E50000;--shiki-dark:#ABB2BF;">  white-space</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0451A5;--shiki-dark:#D19A66;">nowrap</span><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#000000;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><blockquote><p>Demo 地址： <a href="https://codepen.io/airen/full/VwxOYVd" target="_blank" rel="noreferrer">https://codepen.io/airen/full/VwxOYVd</a></p></blockquote><h2 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-label="Permalink to &quot;小结&quot;">​</a></h2><p>前面只是和大家一起探讨了网格布局中的百分比值和 <code>fr</code> 值的计算：</p><ul><li><code>&lt;percentage&gt;</code>： 非负值的百分比值，它相对于网格容器宽度（或高度）计算。采用百分比时有一个细节需要注意，如果网格容器的尺寸大小依赖网格轨道大小时，百分比值将被视为 <code>auto</code>；</li><li><code>&lt;flex&gt;</code> ： 非负值，用单位 <code>fr</code> 来定义网格轨道大小的弹性系数，有点类似于 Flexbox 布局中的 <code>flex</code> 属性，按比例分配网格容器的剩余空间。</li></ul><p>但这绝不是说网格中涉及到计算的就这两种值，其实还有很多其他值也会涉及到计算，比如 <code>grid-template-columns</code> 取值为 <code>auto</code> 、<code>min-content</code> 、<code>max-content</code> 关键词，以及一些 CSS 函数，比如 <code>fit-content()</code> 、<code>minmax()</code>、<code>min()</code> 、<code>max()</code> 、<code>clamp()</code> 和 <code>clac()</code> 等。</p><ul><li><code>max-content</code>：表示以同一网格轨道中内容最大内容的网格项目来计算格轨道网格轨道尺寸。</li><li><code>min-content</code>：表示以同一网格轨道中最大的最小内容的网格项目来计算网格轨道尺寸。</li><li><code>auto</code> ： 如果轨道为最大时，等同于 <code>&lt;max-content&gt;</code>，为最小时，则等同于 <code>&lt;min-content&gt;</code>。</li><li><code>minmax(min, max)</code> ： 是一个来定义大小范围的函数，大于等于 min 值，并且小于等于 max 值。如果 max 值小于 min 值，则该值会被视为 min 值。最大值可以设置为网格轨道系数值 <code>&lt;flex&gt;</code>，但最小值则不行。</li><li><code>fit-content([&lt;length&gt; | &lt;percentage&gt;])</code> ： 相当于 <code>min(max-content, max(auto, argument))</code>，类似于 <code>auto</code> 的计算（即 <code>minmax(auto, max-content)</code>），除非网格轨道大小值是确定下来的，否则该值都大于 <code>auto</code> 的最小值。</li><li><code>repeat([&lt;positive-integer&gt; | auto-fill | auto-fit], &lt;track-list&gt;) </code>： 表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式</li></ul><p>你会发现，这些尺寸的计算大多会和内容有关，因此有关于这方面更详细的介绍，将放到内在尺寸 Web 设计这节课程中介绍。</p><p>这里要提醒大家的是，<strong>虽然本节课程中的示例大都以</strong> <strong><code>grid-template-columns</code></strong> <strong>属性为例，但不代表这些计算只存在于该属性上，相关的理论与细节也同样存在于</strong> <strong><code>grid-template-rows</code></strong> <strong>、<code>grid-auto-rows</code></strong> <strong>和</strong> <strong><code>grid-auto-columns</code>，只不过部分 CSS 的函数可以运用于</strong> <strong><code>grid-auto-rows</code></strong> <strong>和</strong> <strong><code>grid-auto-columns</code></strong> <strong>属性上，比如</strong> <strong><code>repeat()</code></strong> <strong>函数</strong> 。</p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div><section class="border-b-1 border-[var(--vp-c-divider)] w-full border-b-solid mt-[24px] pb-[12px] flex gap-[12px] mb-[12px] flex-wrap max-w-[85%]"><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16m.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995c0-1.224-1.47-2.74-3.153-3.145"></path></svg> 作者:<span>Long Mo</span></div><!----><!----><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 16 16" width="1.2em" height="1.2em"><path fill="currentColor" d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.485 6.879l1.036 4.144l.997-3.655a.5.5 0 0 1 .964 0l.997 3.655l1.036-4.144a.5.5 0 0 1 .97.242l-1.5 6a.5.5 0 0 1-.967.01L8 9.402l-1.018 3.73a.5.5 0 0 1-.967-.01l-1.5-6a.5.5 0 1 1 .97-.242z"></path></svg> 字数统计:<span>11.6k 字</span></div><div class="flex gap-[4px] items-center"><svg style="display:inline-block;" viewBox="0 0 20 20" width="1.2em" height="1.2em"><path fill="currentColor" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm2.5 14.5L9 11V4h2v6l3 3z"></path></svg> 阅读时长:<span>43 分钟</span></div></section></div><div class="flex gap-2 items-center"><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank"><img src="https://github.com/Longmo666.png" class="w-8 h-8 rounded-full"></a> Long Mo</div><div class="px-[1.2rem] relative py-[1rem] border-1 border-[var(--vp-c-border)]/[.55] w-full min-h-[32px] border-solid mt-[32px] leading-[24px] rounded-[4px]"><svg style="display:inline-block;" viewBox="0 0 512 512" width="1.2em" height="1.2em" class="absolute top-[1rem] right-[1.2rem]"><path fill="currentColor" d="M256 512a256 256 0 1 0 0-512a256 256 0 1 0 0 512m-56.6-199.4c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z"></path></svg><section class="flex flex-col gap-y-[8px] overflow-hidden"><div><span class="font-bold">文章作者：</span><span><a href="https://github.com/Longmo666" rel="noreferrer" target="_blank">Long Mo</a></span></div><div><span class="font-bold">版权声明：</span><span> 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noreferrer" target="_blank"> CC BY-NC-SA 4.0 </a> 许可协议。转载请注明来自 <a href="#" rel="noreferrer" target="_blank">Longmo Docs</a></span> ！ </div></section></div></div></div></main><footer class="VPDocFooter" data-v-e512d8d8 data-v-73a75ed6><!--[--><!--]--><div class="edit-info" data-v-73a75ed6><div class="edit-link" data-v-73a75ed6><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/xxx" target="_blank" rel="noreferrer" data-v-73a75ed6><!--[--><span class="vpi-square-pen edit-link-icon" data-v-73a75ed6></span> 在 github 上编辑此页<!--]--></a></div><div class="last-updated" data-v-73a75ed6><p class="VPLastUpdated" data-v-73a75ed6 data-v-28126c9f>上次更新: <time datetime="2024-03-04T16:28:46.000Z" data-v-28126c9f></time></p></div></div><nav class="prev-next" data-v-73a75ed6><div class="pager" data-v-73a75ed6><!----></div><div class="pager" data-v-73a75ed6><a class="VPLink link pager-link next" href="/long-press/css3/%E7%8E%B0%E4%BB%A3web%E5%B8%83%E5%B1%80/01" data-v-73a75ed6><!--[--><span class="desc" data-v-73a75ed6>下一篇</span><span class="title" data-v-73a75ed6>Web 布局技术演进：了解 Web 布局发展史</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-4c760b95 data-v-4f1388a4><div class="container" data-v-4f1388a4><!----><p class="copyright" data-v-4f1388a4>Copyright © 2024-present Longmo</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"css3_lightningcss_index.md\":\"DvrpJ9-C\",\"css3_现代web布局_02.md\":\"NnFPbKjC\",\"css3_postcss_postcss-prefix-selector增加统一作用域.md\":\"BTi7xZ9T\",\"css3_现代web布局_01.md\":\"CSOVLYFa\",\"css3_index.md\":\"gWeubSHW\",\"css3_现代web布局_05.md\":\"XnHgE5qs\",\"css3_现代web布局_07.md\":\"B0JalRYm\",\"electron_electron开发实战_index.md\":\"DlTk4nHM\",\"css3_现代web布局_10.md\":\"QvmMy1qK\",\"css3_现代web布局_03.md\":\"DndCH4AP\",\"css3_现代web布局_22.md\":\"BTcBI1Ar\",\"css3_现代web布局_index.md\":\"BRrTkyN-\",\"react_antd使用踩坑经验汇总_procomponents_index.md\":\"CnA6aYv_\",\"nodejs_change-case更改大小写.md\":\"CtntdOEt\",\"react_react好用的插件_rxjs-hooks.md\":\"CahRrTvr\",\"nodejs_复制移动文件.md\":\"DJvz4Dcu\",\"css3_现代web布局_15.md\":\"CxTdKubj\",\"css3_现代web布局_06.md\":\"DKzKVbHi\",\"guide_axios封装.md\":\"yeyMeLKL\",\"react_react实战_设计模式与最佳实践_服务器端渲染（1）：基本套路.md\":\"Ci9ZteTc\",\"react_react实战_设计模式与最佳实践_react 单元测试.md\":\"ghuW9_Ym\",\"react_react好用的插件_react-to-print.md\":\"DUEXVCMF\",\"css3_现代web布局_12.md\":\"DzvNLnB9\",\"react_react好用的插件_react-load-script.md\":\"DBiqdA1k\",\"electron_electron开发实战_释放前端想象力.md\":\"DjfKiu2P\",\"react_react实战_设计模式与最佳实践_react的设计思想.md\":\"CDFxAnJB\",\"react_react组件库搭建指南_02开发调试.md\":\"C_T24zrV\",\"react_react实战_设计模式与最佳实践_react 的未来（1）： 拥抱异步渲染.md\":\"DDCdfFZA\",\"react_react实战_设计模式与最佳实践_react 状态管理（1）：组件状态.md\":\"CleS-bmU\",\"react_react好用的插件_react-viewer.md\":\"CK92G5ky\",\"electron_electron开发实战_electron应用打包.md\":\"DVihGNUt\",\"react_react好用的插件_index.md\":\"CYvYsgxN\",\"react_react好用的插件_formik-antd.md\":\"BVXoD1vi\",\"react_react实战_设计模式与最佳实践_组件设计模式（2）：高阶组件.md\":\"tcEHCkX9\",\"react_css解决方案_styled-components.md\":\"BdEVJSYP\",\"react_react后台管理系统项目实战_index.md\":\"Cf5Aki5e\",\"react_react好用的插件_floating-ui.md\":\"CJ47U607\",\"react_react好用的插件_js-pinyin.md\":\"CCi7zpiQ\",\"electron_electron开发实战_原生gui.md\":\"CKymHWIE\",\"react_antd使用踩坑经验汇总_tabs选项卡.md\":\"DbBQtB84\",\"react_react好用的插件_immer.md\":\"J3J2rLev\",\"css3_现代web布局_08.md\":\"CKAlv-cw\",\"react_react好用的插件_@ebay_nice-modal-react.md\":\"2t81QhzX\",\"react_react hooks.md\":\"DllmXlwe\",\"react_发布订阅_事件总线.md\":\"DGl0tyUU\",\"react_react组件库搭建指南_03编译打包.md\":\"BSWt83_X\",\"guide_quickstart.md\":\"DNtvLzj7\",\"react_开发一个组件库_如何完善组件单测.md\":\"9v27j5fA\",\"react_慕课网最新react技术栈，实战复杂低代码项目-仿问卷星_index.md\":\"DV2mTP-I\",\"react_ahooks_usewhydidyouupdate.md\":\"DeDGpqMK\",\"react_开发一个组件库_index.md\":\"DFCM9Fyc\",\"react_ahooks_usemutationobserver.md\":\"DopGRhup\",\"react_ahooks_uselocalstoragestate.md\":\"CNKG9DfH\",\"react_如何写出更优雅的 react 组件.md\":\"BNRAsuz5\",\"react_ahooks_useeventlistener.md\":\"C022IGRg\",\"react_ahooks_useloading.md\":\"hmNqPF-b\",\"react_ahooks_usethrottle.md\":\"Cxs7sHDg\",\"react_ahooks_usevirtuallist.md\":\"CbSqBIa_\",\"react_ahooks_index.md\":\"BZgeYQAN\",\"react_ahooks_usethrottleeffect.md\":\"Cu9lbAeN\",\"react_ahooks_useinterval.md\":\"z_JjaRUC\",\"react_ahooks_useinfinitescroll.md\":\"05X3BT3k\",\"react_ahooks_useboolean.md\":\"B9uk9pv1\",\"react_ahooks_usehover.md\":\"CQ90ygMl\",\"react_ahooks_usetoggle.md\":\"Dhg-kOcZ\",\"css3_现代web布局_16.md\":\"DqleGwZV\",\"electron_前端必学的桌面开发：electron_react开发桌面应用_1w多字超详细.md\":\"B4S71t_j\",\"react_index.md\":\"VMykJvDU\",\"react_ahooks_usethrottlefn.md\":\"h86SJGdz\",\"react_ahooks_useurlstate.md\":\"N0NRnJcE\",\"react_ahooks_usetrackedeffect.md\":\"DikGGrmT\",\"react_状态管理_natur.md\":\"CjabmgMv\",\"react_ahooks_useantdtable.md\":\"BRTEfq-4\",\"react_ahooks_userafinterval.md\":\"DbqchCta\",\"react_ahooks_useunmount.md\":\"DKpqgfJ2\",\"getting_index.md\":\"CslhLb_Q\",\"react_ahooks_usepagination.md\":\"BZPuA30r\",\"react_react好用的插件_react-jsx-parse.md\":\"BFws_Jvt\",\"react_ahooks_useprevious.md\":\"DoaMcKL0\",\"react_数据请求的reacthooks库_index.md\":\"BVjU5EHg\",\"nodejs_解压缩.md\":\"B8sDL8Ck\",\"react_开发一个组件库_handlebars模板.md\":\"eFtlYiJE\",\"react_自定义hooks_useasynceffect.md\":\"0TOcgDP8\",\"react_ahooks_usewebsocket.md\":\"BSCnKAhD\",\"css3_现代web布局_09.md\":\"CJg03gvR\",\"react_ahooks_useasynceffect.md\":\"LHnOKcnJ\",\"移动端项目_index.md\":\"BYabTvu-\",\"react_ahooks_usememoizedfn.md\":\"BHTS7A7g\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_index.md\":\"BOXXNcld\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第04章 ts 类易被忽视的重要技能，单件设计模式和相关技能深入.md\":\"CCgSUH_B\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第11章 运用 ts 手写 promise 源码.md\":\"BalHRnKD\",\"react_性能监控_index.md\":\"BLRO71Ft\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第03章 ts类方法代码优化的三大法宝： 函数重载、类方法重载、类构造器重载.md\":\"BS1BYvbm\",\"standard_fatherrc.ts配置文件.md\":\"Dkdjh5--\",\"react_自定义hooks_useexceldownload.md\":\"DGb3CWTU\",\"tools_runjs.md\":\"IzZ9xe5N\",\"tools_自动版本管理和生成changelog.md\":\"Dak6Id3b\",\"react_react实战_设计模式与最佳实践_路由的魔法：react router.md\":\"CZ2pkqmc\",\"tools_依赖镜像地址.md\":\"D5Etjm_v\",\"react_react实战_设计模式与最佳实践_组件设计模式（5）：组合组件.md\":\"D54UFiB5\",\"tools_workspaces核心特性总结.md\":\"CxNbObiL\",\"react_自定义hooks_usegreatasync.md\":\"DRVA9yrK\",\"react_react组件库搭建指南_05标准化发布流程.md\":\"BCCPnMto\",\"react_react实战_设计模式与最佳实践_组件设计模式（1）：聪明组件和傻瓜组件.md\":\"tHZI-Xkb\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第05章 ts继承深入_手写优化底层源码.md\":\"B3EQqYKB\",\"tools_rollup打包.md\":\"tSbCVBX5\",\"tools_webstorm快捷键.md\":\"wTpb7qJx\",\"react_react实战_设计模式与最佳实践_服务器端渲染（2）理解nextjs.md\":\"BqBtpEHC\",\"tools_vscode使用教程.md\":\"CqieXqJ8\",\"react_react最佳实践.md\":\"CG2Xrs5X\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第07章 泛型类_泛型接口_泛型类约束的复杂应用【无比重要的深度技能】.md\":\"CuEcP3SC\",\"react_自定义hooks_useeffectenhanced.md\":\"BSK0VwJa\",\"vue_index.md\":\"OW-QE8NS\",\"react_状态管理_react中的组件通信方案.md\":\"D8VvM0h8\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_index.md\":\"CHFAmRtj\",\"standard_pretty-quick.md\":\"CL9LWL6Z\",\"typescript_ts 从入门到深度掌握，晋级typescript高手实战课程_第10章ts声明文件，ts模块.md\":\"BgUWX90K\",\"react_ahooks_usesetstate.md\":\"jYidiqGI\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第06章 ts高频使用技能： 类型断言、类型守卫、自定义守卫_ 多态_类型守卫组合应用.md\":\"DTiCfWrY\",\"standard_typings.d.ts.md\":\"COgkopwu\",\"react_react实战_设计模式与最佳实践_组件设计模式（4）：提供者模式.md\":\"CpJkLsBD\",\"typescript_axios_index.md\":\"CjiV2R0j\",\"css3_现代web布局_23.md\":\"DtcX9bTS\",\"electron_electron开发实战_app特性.md\":\"CCGKgh2J\",\"tools_常用命令.md\":\"BCECAPPN\",\"react_ahooks_useupdateeffect.md\":\"B8UnIDT1\",\"tools_npm镜像源管理工具.md\":\"BQvl6-cK\",\"react_自定义hooks_index.md\":\"TbSBlD7i\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第15章 js 原型_复杂原型继承 【查漏补缺】.md\":\"Bym60KVf\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第12章整合vue3手写高水准大厂的ts版vuex4源码.md\":\"Cb3ALa6o\",\"react_css解决方案_css_module.md\":\"kmxgfb6l\",\"css3_现代web布局_04.md\":\"qxIAivzd\",\"react_ahooks_useraftimeout.md\":\"zZ6X2MGp\",\"react_自定义hooks_usecopy.md\":\"B_vVrQah\",\"react_useform.md\":\"D7K5ezD8\",\"css3_现代web布局_27.md\":\"DVEkZdZW\",\"react_状态管理_valtio.md\":\"CXPGtt95\",\"typescript_tsup如何使用.md\":\"CHCfoXjX\",\"react_ahooks_usecookiestate.md\":\"CdRty31d\",\"tools_node各类命令.md\":\"Dp8hvkZX\",\"electron_electron开发实战_electron优化白屏.md\":\"TluuIOV8\",\"css3_现代web布局_24.md\":\"BTAj5AxQ\",\"css3_现代web布局_13.md\":\"BvIlMTco\",\"css3_现代web布局_14.md\":\"CXYZfM8r\",\"react_antd使用踩坑经验汇总_antdtable表格.md\":\"DJY5Mvdl\",\"guide_babel.md\":\"DTbGDSVq\",\"react_状态管理_zustand翻译文档.md\":\"D72s6MxU\",\"guide_index.md\":\"zNzT7elx\",\"tools_资源导航.md\":\"ByR0zpON\",\"react_antd使用踩坑经验汇总_menu菜单.md\":\"CUT3snoK\",\"tools_pnpm多包项目.md\":\"B5SWK1rS\",\"guide_webpack插件.md\":\"RycubFW9\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第02章 全栈思维全面深度掌握 ts 类.md\":\"DT7QMqkY\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第10章 从装饰器应用，底层 js 到 仿 nestjs实战，路由器底层复杂泛型.md\":\"D8kaCtfy\",\"electron_electron开发实战_开发一个简单版的番茄钟.md\":\"CrvCihNB\",\"react_ahooks_useclickaway.md\":\"CZiIOkBS\",\"index.md\":\"C-4ajOyn\",\"react_自定义hooks_useinterval.md\":\"CL7txl3c\",\"nodejs_请求工具类.md\":\"pJv1vv26\",\"react_ahooks_usedebouncefn.md\":\"DoBqhrGU\",\"getting_why.md\":\"B0La2IDF\",\"vue_vue2打包优化.md\":\"o7QF6PW3\",\"nodejs_globby.md\":\"CTH274g9\",\"standard_tsconfig.json.md\":\"CFCzGYxu\",\"react_reactrouter.md\":\"B9PtxEJ9\",\"typescript_ts-challenge.md\":\"CQjhG-Mq\",\"css3_现代web布局_18.md\":\"DbKppEVn\",\"react_ahooks_usedebounce.md\":\"DRqZkoSI\",\"react_自定义hooks_useintersection.md\":\"Bvd3uAWW\",\"nodejs_cli工具_index.md\":\"CGwLSUZ5\",\"react_react实战_设计模式与最佳实践_index.md\":\"C8mvV9MI\",\"tools_规范git代码提交信息.md\":\"BASOsPqX\",\"tools_windows测试ip端口.md\":\"DG6x0Mw8\",\"electron_electron开发实战_使用nodejs调用原生模块.md\":\"CRvmiRGG\",\"nodejs_kill-port跨平台解决端口占用问题.md\":\"BEoOmVOA\",\"css3_现代web布局_28.md\":\"jsAdcmE1\",\"react_react实战_设计模式与最佳实践_组件实践（1）：如何定义清晰可维护的接口.md\":\"C9ky0LxI\",\"react_react实战_设计模式与最佳实践_react 的未来（3）：函数化的 hooks.md\":\"CFPGDH01\",\"react_react组件库搭建指南_index.md\":\"DavlhH-3\",\"react_react避坑指南_usecallback_usememo.md\":\"DBJVYTaL\",\"standard_prettier.md\":\"B8zmNcDZ\",\"react_react实战_设计模式与最佳实践_组件设计模式（3）：render props 模式.md\":\"J6wo2neN\",\"standard_git提交规范.md\":\"BY6vFgPF\",\"css3_现代web布局_26.md\":\"BlwKd9DD\",\"react_redux.md\":\"BR83V68G\",\"nodejs_fs-extra文件系统扩展.md\":\"BeGbM1-y\",\"react_react组件库搭建指南_06dumi2.x的使用.md\":\"BovenX8E\",\"tools_github常用技巧.md\":\"DCwuF17j\",\"electron_数据持久缓存方案_electron-store.md\":\"6LHFkhuG\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】.md\":\"BvOBMPMd\",\"nodejs_semantic-release.md\":\"B_4_SZrq\",\"react_react实战_设计模式与最佳实践_组件实践（2）：组件的内部实现.md\":\"pvpT0TG5\",\"typescript_tslib如何使用.md\":\"BsoCW_pQ\",\"react_react实战_设计模式与最佳实践_组件实践（3）：组件化样式.md\":\"DGiADrWs\",\"react_css解决方案_index.md\":\"Q7QSPlYi\",\"typescript_tsdx使用.md\":\"Bcl_A70V\",\"css3_现代web布局_17.md\":\"BCxBKcNP\",\"react_react避坑指南_usestate.md\":\"DK9-NLHJ\",\"electron_react中开发踩坑.md\":\"DpZMxt4e\",\"react_react实战_设计模式与最佳实践_react 的未来（2）：suspense 带来的异步操作革命.md\":\"BLMrhryT\",\"guide_两个跨域页面进行跳转传参的终极方案.md\":\"DrhWeMH4\",\"react_react避坑指南_index.md\":\"DSoRNwmH\",\"react_自定义hooks_useinputhistory.md\":\"BzWdP5Ij\",\"react_ahooks_useeventemitter.md\":\"OluScTeX\",\"react_自定义hooks_usedebounce.md\":\"7ESFZNIZ\",\"electron_dll使用.md\":\"CGmPSJLR\",\"css3_现代web布局_19.md\":\"DIVJU0PC\",\"react_react好用的插件_react-fast-marquee.md\":\"ZhOvpApp\",\"guide_markdown语法.md\":\"BiAJoIJO\",\"nodejs_execa执行外部命令.md\":\"x2fLlbix\",\"nodejs_npkill快速查找删除node_modules.md\":\"CCmNiMZ0\",\"react_ahooks_usefullscreen.md\":\"BkgW8e5k\",\"react_自定义hooks_usesetparticalstate.md\":\"BUv_cnmS\",\"standard_css规范.md\":\"DeHg6jnS\",\"electron_数据持久缓存方案_数据持久缓存库lndb.md\":\"DJUK7UVx\",\"react_自定义组件_如何在react应用中建立错误处理层.md\":\"CNGgmToJ\",\"react_react搞定复杂项目状态管理_index.md\":\"BAj7---e\",\"typescript_晋级typescript高手，成为抢手的前端开发人才_第09章 深入infer、ts高级类型、泛型再进阶【全方位深度掌握 ts 泛型】.md\":\"C4bu5mph\",\"tools_idea 注释模板配置.md\":\"0gbuJbd6\",\"electron_基于electron-vite构建react桌面客户端.md\":\"DLOPvG7Q\",\"nodejs_release-it.md\":\"DMPaqLXc\",\"react_react实战_设计模式与最佳实践_react 状态管理（3）：mobx 使用模式.md\":\"Bm7xwY_i\",\"react_ahooks_usehistorytravel.md\":\"DiEJa1G5\",\"css3_现代web布局_21.md\":\"D2PeNBzk\",\"css3_现代web布局_11.md\":\"B10tI7m_\",\"react_antd使用踩坑经验汇总_tree组件.md\":\"CHpE5yvc\",\"electron_electron-builder.md\":\"DNL_pnq4\",\"standard_vue规范.md\":\"DyiLpRai\",\"electron_index.md\":\"BRqk3UrY\",\"react_自定义hooks_userouter.md\":\"LSydLgnY\",\"utils_rxjs.md\":\"C9QQC7cC\",\"standard_codereview代码审查.md\":\"vOhADmqT\",\"react_ahooks_userequest函数.md\":\"erWiB1Ub\",\"react_自定义hooks_usedebouncefn.md\":\"CD-kzD_X\",\"linux_linux常用命令.md\":\"D7RSIp22\",\"standard_commitlint.md\":\"Bc6BHMQJ\",\"react_自定义hooks_uselocationlisten.md\":\"lpoaVI0f\",\"standard_组件封装规范.md\":\"0Ow45yWm\",\"react_自定义hooks_useecharts.md\":\"GJwF9MkV\",\"nodejs_bluebird超高性能的promise库.md\":\"DY98ImvT\",\"react_react避坑指南_useref.md\":\"fBjuCQ9O\",\"electron_electron开发实战_electron环境搭建.md\":\"BaHlrXyB\",\"utils_index.md\":\"mk7T0j55\",\"react_自定义hooks_useevent.md\":\"Comn2-Er\",\"typescript_index.md\":\"Dcw9VPNE\",\"standard_git分支开发规范.md\":\"BIXsyTAc\",\"electron_三方库.md\":\"CAt92F-s\",\"react_react组件库搭建指南_01项目初始化.md\":\"hYE7GWll\",\"react_react好用的插件_jsbarcode.md\":\"CBTRcUAR\",\"electron_electron-react-boilerplate.md\":\"BzWSbABc\",\"react_自定义hooks_usemodal.md\":\"B_XFkn0G\",\"standard_editorconfig.md\":\"D8UrOG7b\",\"tools_git基本使用.md\":\"BvP_0S5g\",\"react_react避坑指南_闭包陷阱.md\":\"zChJGfX2\",\"standard_prettierrc.md\":\"BdHhuL9t\",\"standard_babelrc.md\":\"DxUrlX2l\",\"standard_eslint规范.md\":\"Mu3t4FWn\",\"react_react实战_设计模式与最佳实践_react 状态管理（4）：不同方式对比.md\":\"C3iD1iFV\",\"react_antd使用踩坑经验汇总_index.md\":\"DDsanD1T\",\"tools_yalc本地调试组件库方案.md\":\"BQ3H5AQN\",\"standard_json格式规范.md\":\"B3NuLvz_\",\"electron_配置讲解.md\":\"Bz4ASaED\",\"nodejs_index.md\":\"D6qsbk0v\",\"standard_node_cjs和esm混合开发.md\":\"DedlYZ1u\",\"css3_现代web布局_25.md\":\"DZBc6jqi\",\"standard_stylelint.md\":\"zaLGDP6-\",\"react_自定义hooks_useformmodal.md\":\"DRclMTXI\",\"standard_开源证书.md\":\"CNa1gXoD\",\"react_antd使用踩坑经验汇总_其他弹出层.md\":\"CYvGLZdo\",\"utils_baseinputnumber.md\":\"CCJr66pT\",\"guide_installation.md\":\"Cyna48DO\",\"utils_lodash.md\":\"B_LD-ulc\",\"standard_react规范.md\":\"BDzywc_U\",\"standard_sytlelint.md\":\"BHAGjA08\",\"tools_readme.md自动生成目录.md\":\"Doh9u-Eg\",\"react_自定义hooks_usememo.md\":\"CZgD0tn_\",\"standard_gitignore.md\":\"DGdE7Xq3\",\"react_react避坑指南_useeffect.md\":\"BNAb8N04\",\"nodejs_pkg打包node程序.md\":\"C_mVgg8Y\",\"standard_husky.md\":\"DWpB1fyF\",\"utils_calcutils.md\":\"QyONwp33\",\"tools_index.md\":\"CrRsxT5W\",\"standard_index.md\":\"zy5tYKLI\",\"react_自定义hooks_usemethods.md\":\"CLURCU9f\",\"react_自定义hooks_useloadscript.md\":\"CYcWRvSo\",\"tools_google快捷键.md\":\"mD76rDlK\",\"standard_package.json.md\":\"jsOo3MDQ\",\"standard_前端开发最佳实践总结.md\":\"BGrFiLKW\",\"react_自定义hooks_usesafestate.md\":\"m62ZMP2_\",\"standard_prettierignore.md\":\"VM68Ff5l\",\"react_react实战_设计模式与最佳实践_react 状态管理（2）：redux 使用模式.md\":\"CA0pcV96\",\"utils_mitt.md\":\"DG7F8qQl\",\"standard_gitlab.yml.md\":\"lN9PqoBe\",\"nodejs_minimist命令行参数解析.md\":\"Dx4gEgi2\",\"standard_命名规范.md\":\"DWUPIS4I\",\"react_自定义hooks_usepersistcallback.md\":\"FHXVMyDJ\",\"tools_windows终端优化.md\":\"DANvAyOj\",\"electron_ssl证书.md\":\"Q1dQBluF\",\"react_自定义组件_lazyload.md\":\"B9Bn4iLf\",\"react_自定义组件_keepalive.md\":\"YY9acXG_\",\"tools_常用node库.md\":\"DTeGhNPp\",\"standard_lint-staged.md\":\"DidcSpvQ\",\"css3_现代web布局_20.md\":\"DVP5FwHt\",\"guide_数字相关知识.md\":\"BRzTdbnI\",\"standard_圈复杂度.md\":\"B-UtHNKH\",\"tools_windows快捷键.md\":\"BFgiqO74\",\"standard_ts规范.md\":\"CiDbO0cg\",\"react_antd使用踩坑经验汇总_form表单.md\":\"DGT8jzsZ\",\"react_状态管理_zustand.md\":\"CQAFP37K\",\"react_react好用的插件_react-hook-form.md\":\"BsJSOnXN\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"龙陌的博客\",\"description\":\"基于vite为基础搭建的风格脚手架,提供多种模板以便于更高效的解决业务需求！\",\"base\":\"/long-press/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.ico\",\"nav\":[{\"text\":\"💻 首页\",\"link\":\"/\"},{\"text\":\"💡 指南\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"🔧 编程工具\",\"link\":\"/tools/\"},{\"text\":\"🔧 常用工具类\",\"link\":\"/utils/\"},{\"text\":\"📋 前端规范\",\"link\":\"/standard/\"},{\"text\":\"⭐ React\",\"link\":\"/react/React实战,设计模式与最佳实践/\"},{\"text\":\"⭐ TypeScript\",\"link\":\"/typescript/\"},{\"text\":\"⭐ Css3\",\"link\":\"/css3/\"},{\"text\":\"⭐ Electron\",\"link\":\"/electron/\"},{\"text\":\"⭐ Linux\",\"link\":\"/linux/linux常用命令\",\"activeMatch\":\"/linux/\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://vitepress.vuejs.org/guide/getting-started\"},{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\" aria-hidden=\\\"true\\\" role=\\\"img\\\" width=\\\"20\\\" height=\\\"20\\\"  viewBox=\\\"0 0 512 512\\\" >\\n    <path fill=\\\"currentColor\\\" d=\\\"M488.6 104.1c16.7 18.1 24.4 39.7 23.3 65.7v202.4c-.4 26.4-9.2 48.1-26.5 65.1c-17.2 17-39.1 25.9-65.5 26.7H92.02c-26.45-.8-48.21-9.8-65.28-27.2C9.682 419.4.767 396.5 0 368.2V169.8c.767-26 9.682-47.6 26.74-65.7C43.81 87.75 65.57 78.77 92.02 78h29.38L96.05 52.19c-5.75-5.73-8.63-13-8.63-21.79c0-8.8 2.88-16.06 8.63-21.797C101.8 2.868 109.1 0 117.9 0s16.1 2.868 21.9 8.603L213.1 78h88l74.5-69.397C381.7 2.868 389.2 0 398 0c8.8 0 16.1 2.868 21.9 8.603c5.7 5.737 8.6 12.997 8.6 21.797c0 8.79-2.9 16.06-8.6 21.79L394.6 78h29.3c26.4.77 48 9.75 64.7 26.1zm-38.8 69.7c-.4-9.6-3.7-17.4-10.7-23.5c-5.2-6.1-14-9.4-22.7-9.8H96.05c-9.59.4-17.45 3.7-23.58 9.8c-6.14 6.1-9.4 13.9-9.78 23.5v194.4c0 9.2 3.26 17 9.78 23.5s14.38 9.8 23.58 9.8H416.4c9.2 0 17-3.3 23.3-9.8c6.3-6.5 9.7-14.3 10.1-23.5V173.8zm-264.3 42.7c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.2 6.3-14 9.5-23.6 9.5c-9.6 0-17.5-3.2-23.6-9.5c-6.1-6.3-9.4-14-9.8-23.2v-33.3c.4-9.1 3.8-16.9 10.1-23.2c6.3-6.3 13.2-9.6 23.3-10c9.2.4 17 3.7 23.3 10zm191.5 0c6.3 6.3 9.7 14.1 10.1 23.2V273c-.4 9.2-3.7 16.9-9.8 23.2c-6.1 6.3-14 9.5-23.6 9.5c-9.6 0-17.4-3.2-23.6-9.5c-7-6.3-9.4-14-9.7-23.2v-33.3c.3-9.1 3.7-16.9 10-23.2c6.3-6.3 14.1-9.6 23.3-10c9.2.4 17 3.7 23.3 10z\\\"></path>\\n  </svg>\"},\"link\":\"https://space.bilibili.com/248956095\"}],\"footer\":{\"copyright\":\"Copyright © 2024-present Longmo\"},\"sidebar\":{\"/\":[{\"text\":\"开始阅读\",\"collapsed\":false,\"items\":[{\"text\":\"阅读须知\",\"link\":\"/guide\"}]}],\"/tools/\":[{\"collapsed\":false,\"items\":[{\"text\":\"GitHub常用技巧\",\"link\":\"\\\\tools\\\\GitHub常用技巧.md\"},{\"text\":\"Google快捷键\",\"link\":\"\\\\tools\\\\Google快捷键.md\"},{\"text\":\"README.md自动生成目录\",\"link\":\"\\\\tools\\\\README.md自动生成目录.md\"},{\"text\":\"Rollup打包\",\"link\":\"\\\\tools\\\\Rollup打包.md\"},{\"text\":\"Runjs\",\"link\":\"\\\\tools\\\\Runjs.md\"},{\"text\":\"Vscode使用教程\",\"link\":\"\\\\tools\\\\Vscode使用教程.md\"},{\"text\":\"WebStorm快捷键\",\"link\":\"\\\\tools\\\\WebStorm快捷键.md\"},{\"text\":\"Windows快捷键\",\"link\":\"\\\\tools\\\\Windows快捷键.md\"},{\"text\":\"Windows测试IP端口\",\"link\":\"\\\\tools\\\\Windows测试IP端口.md\"},{\"text\":\"Windows终端优化\",\"link\":\"\\\\tools\\\\Windows终端优化.md\"},{\"text\":\"Yalc本地调试组件库方案\",\"link\":\"\\\\tools\\\\Yalc本地调试组件库方案.md\"},{\"text\":\"git基本使用\",\"link\":\"\\\\tools\\\\git基本使用.md\"},{\"text\":\"idea 注释模板配置\",\"link\":\"\\\\tools\\\\idea 注释模板配置.md\"},{\"text\":\"node各类命令\",\"link\":\"\\\\tools\\\\node各类命令.md\"},{\"text\":\"npm镜像源管理工具\",\"link\":\"\\\\tools\\\\npm镜像源管理工具.md\"},{\"text\":\"pnpm多包项目\",\"link\":\"\\\\tools\\\\pnpm多包项目.md\"},{\"text\":\"workspaces核心特性总结\",\"link\":\"\\\\tools\\\\workspaces核心特性总结.md\"},{\"text\":\"依赖镜像地址\",\"link\":\"\\\\tools\\\\依赖镜像地址.md\"},{\"text\":\"常用node库\",\"link\":\"\\\\tools\\\\常用node库.md\"},{\"text\":\"常用命令\",\"link\":\"\\\\tools\\\\常用命令.md\"},{\"text\":\"自动版本管理和生成CHANGELOG\",\"link\":\"\\\\tools\\\\自动版本管理和生成CHANGELOG.md\"},{\"text\":\"规范GIT代码提交信息\",\"link\":\"\\\\tools\\\\规范GIT代码提交信息.md\"},{\"text\":\"资源导航\",\"link\":\"\\\\tools\\\\资源导航.md\"}]}],\"/standard/\":[{\"collapsed\":false,\"items\":[{\"text\":\"CodeReview代码审查\",\"link\":\"\\\\standard\\\\CodeReview代码审查.md\"},{\"text\":\"Css规范\",\"link\":\"\\\\standard\\\\Css规范.md\"},{\"text\":\"Git分支开发规范\",\"link\":\"\\\\standard\\\\Git分支开发规范.md\"},{\"text\":\"Node_CJS和ESM混合开发\",\"link\":\"\\\\standard\\\\Node_CJS和ESM混合开发.md\"},{\"text\":\"React规范\",\"link\":\"\\\\standard\\\\React规范.md\"},{\"text\":\"babelrc\",\"link\":\"\\\\standard\\\\babelrc.md\"},{\"text\":\"commitlint\",\"link\":\"\\\\standard\\\\commitlint.md\"},{\"text\":\"editorconfig\",\"link\":\"\\\\standard\\\\editorconfig.md\"},{\"text\":\"eslint规范\",\"link\":\"\\\\standard\\\\eslint规范.md\"},{\"text\":\"fatherrc.ts配置文件\",\"link\":\"\\\\standard\\\\fatherrc.ts配置文件.md\"},{\"text\":\"gitignore\",\"link\":\"\\\\standard\\\\gitignore.md\"},{\"text\":\"gitlab.yml\",\"link\":\"\\\\standard\\\\gitlab.yml.md\"},{\"text\":\"git提交规范\",\"link\":\"\\\\standard\\\\git提交规范.md\"},{\"text\":\"husky\",\"link\":\"\\\\standard\\\\husky.md\"},{\"text\":\"json格式规范\",\"link\":\"\\\\standard\\\\json格式规范.md\"},{\"text\":\"lint-staged\",\"link\":\"\\\\standard\\\\lint-staged.md\"},{\"text\":\"package.json\",\"link\":\"\\\\standard\\\\package.json.md\"},{\"text\":\"prettier\",\"link\":\"\\\\standard\\\\prettier.md\"},{\"text\":\"prettierignore\",\"link\":\"\\\\standard\\\\prettierignore.md\"},{\"text\":\"prettierrc\",\"link\":\"\\\\standard\\\\prettierrc.md\"},{\"text\":\"pretty-quick\",\"link\":\"\\\\standard\\\\pretty-quick.md\"},{\"text\":\"stylelint\",\"link\":\"\\\\standard\\\\stylelint.md\"},{\"text\":\"sytlelint\",\"link\":\"\\\\standard\\\\sytlelint.md\"},{\"text\":\"tsconfig.json\",\"link\":\"\\\\standard\\\\tsconfig.json.md\"},{\"text\":\"ts规范\",\"link\":\"\\\\standard\\\\ts规范.md\"},{\"text\":\"typings.d.ts\",\"link\":\"\\\\standard\\\\typings.d.ts.md\"},{\"text\":\"vue规范\",\"link\":\"\\\\standard\\\\vue规范.md\"},{\"text\":\"前端开发最佳实践总结\",\"link\":\"\\\\standard\\\\前端开发最佳实践总结.md\"},{\"text\":\"命名规范\",\"link\":\"\\\\standard\\\\命名规范.md\"},{\"text\":\"圈复杂度\",\"link\":\"\\\\standard\\\\圈复杂度.md\"},{\"text\":\"开源证书\",\"link\":\"\\\\standard\\\\开源证书.md\"},{\"text\":\"组件封装规范\",\"link\":\"\\\\standard\\\\组件封装规范.md\"}]}],\"/aHooks/\":[],\"/utils/\":[{\"collapsed\":false,\"items\":[{\"text\":\"BaseInputNumber\",\"link\":\"\\\\utils\\\\BaseInputNumber.md\"},{\"text\":\"calcUtils\",\"link\":\"\\\\utils\\\\calcUtils.md\"},{\"text\":\"lodash\",\"link\":\"\\\\utils\\\\lodash.md\"},{\"text\":\"mitt\",\"link\":\"\\\\utils\\\\mitt.md\"},{\"text\":\"rxjs\",\"link\":\"\\\\utils\\\\rxjs.md\"}]}],\"/guide/\":[{\"text\":\"基础\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/guide/quickstart\"},{\"text\":\"Markdown语法\",\"link\":\"/guide/Markdown语法\"}]},{\"text\":\"进阶\",\"items\":[{\"text\":\"打包指南\",\"link\":\"/guide/打包指南\"}]}],\"/react/\":{\"base\":\"/react/\",\"items\":[{\"text\":\"React基础\",\"base\":\"/react/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"},{\"text\":\"React Hooks\",\"link\":\"React Hooks\"},{\"text\":\"ReactRouter\",\"link\":\"ReactRouter\"}]},{\"text\":\"Antd使用踩坑经验汇总\",\"base\":\"/react/Antd使用踩坑经验汇总/\",\"items\":[{\"text\":\"Form表单\",\"link\":\"Form表单\"},{\"text\":\"AntdTable表格\",\"link\":\"AntdTable表格\"},{\"text\":\"Tree树组件\",\"link\":\"Tree组件\"},{\"text\":\"其他弹出层\",\"link\":\"其他弹出层\"},{\"text\":\"Tabs选项卡\",\"link\":\"Tabs选项卡\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"},{\"text\":\"Menu菜单\",\"link\":\"Menu菜单\"}]},{\"text\":\"CSS解决方案\",\"base\":\"/react/CSS解决方案/\",\"items\":[{\"text\":\"CSS Module\",\"link\":\"CSS_Module\"}]},{\"text\":\"ahooks\",\"link\":\"/aHooks/\"},{\"text\":\"自定义Hooks\",\"base\":\"/react/自定义Hooks/\",\"items\":[{\"text\":\"useRouter\",\"link\":\"useRouter\"},{\"text\":\"useLoadScript\",\"link\":\"useLoadScript\"},{\"text\":\"useInputHistory\",\"link\":\"useInputHistory\"},{\"text\":\"useSetParticalState\",\"link\":\"useSetParticalState\"},{\"text\":\"useFormModal\",\"link\":\"useFormModal\"},{\"text\":\"useCopy\",\"link\":\"useCopy\"},{\"text\":\"useIntersection\",\"link\":\"useIntersection\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useInterval\",\"link\":\"useInterval\"},{\"text\":\"useModal\",\"link\":\"useModal\"},{\"text\":\"useModal\",\"link\":\"useModal\"}]},{\"text\":\"React实战：设计模式和最佳实践\",\"base\":\"/react/React实战,设计模式与最佳实践/\",\"collapsed\":true,\"items\":[{\"text\":\"React的设计思想\",\"link\":\"React的设计思想\"},{\"text\":\"组件实践（1）：如何定义清晰可维护的接口\",\"link\":\"组件实践（1）：如何定义清晰可维护的接口\"},{\"text\":\"组件实践（2）：组件的内部实现\",\"link\":\"组件实践（2）：组件的内部实现\"},{\"text\":\"组件实践（3）：组件化样式\",\"link\":\"组件实践（3）：组件化样式\"},{\"text\":\"组件设计模式（1）：聪明组件和傻瓜组件\",\"link\":\"组件设计模式（1）：聪明组件和傻瓜组件\"},{\"text\":\"组件设计模式（2）：高阶组件\",\"link\":\"组件设计模式（2）：高阶组件\"},{\"text\":\"组件设计模式（3）：render props 模式\",\"link\":\"组件设计模式（3）：render props 模式\"},{\"text\":\"组件设计模式（4）：提供者模式\",\"link\":\"组件设计模式（4）：提供者模式\"},{\"text\":\"组件设计模式（5）：组合组件\",\"link\":\"组件设计模式（5）：组合组件\"},{\"text\":\"React 单元测试\",\"link\":\"React 单元测试\"},{\"text\":\"React 状态管理（1）：组件状态\",\"link\":\"React 状态管理（1）：组件状态\"},{\"text\":\"React 状态管理（2）：Redux 使用模式\",\"link\":\"React 状态管理（2）：Redux 使用模式\"},{\"text\":\"React 状态管理（3）：Mobx 使用模式\",\"link\":\"React 状态管理（3）：Mobx 使用模式\"},{\"text\":\"React 状态管理（4）：不同方式对比\",\"link\":\"React 状态管理（4）：不同方式对比\"},{\"text\":\"路由的魔法：React Router\",\"link\":\"路由的魔法：React Router\"},{\"text\":\"服务器端渲染（1）：基本套路\",\"link\":\"服务器端渲染（1）：基本套路\"},{\"text\":\"服务器端渲染（2):理解Nextjs\",\"link\":\"服务器端渲染（2）理解NextJS\"},{\"text\":\"React 的未来（1）： 拥抱异步渲染\",\"link\":\"React 的未来（1）： 拥抱异步渲染\"},{\"text\":\"React 的未来（2）：Suspense 带来的异步操作革命\",\"link\":\"React 的未来（2）：Suspense 带来的异步操作革命\"},{\"text\":\"React 的未来（3）：函数化的 Hooks\",\"link\":\"React 的未来（3）：函数化的 Hooks\"}]},{\"text\":\"React搞定复杂项目状态管理\",\"base\":\"/react/React搞定复杂项目状态管理/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React后台管理系统项目实战\",\"base\":\"/react/React后台管理系统项目实战/\",\"collapsed\":false,\"items\":[]},{\"text\":\"慕课网最新React技术栈，实战复杂低代码项目-仿问卷星\",\"base\":\"/react/慕课网最新React技术栈，实战复杂低代码项目-仿问卷星/\",\"collapsed\":false,\"items\":[]},{\"text\":\"React状态管理\",\"base\":\"/react/状态管理/\",\"collapsed\":false,\"items\":[{\"text\":\"zustand\",\"link\":\"zustand\"},{\"text\":\"zustand翻译文档\",\"link\":\"zustand翻译文档\"}]},{\"text\":\"开发一个组件库\",\"base\":\"/react/开发一个组件库/\",\"items\":[{\"text\":\"如何完善组件单测\",\"link\":\"如何完善组件单测\"},{\"text\":\"handlebars模板\",\"link\":\"handlebars模板\"}]},{\"text\":\"React好用的插件\",\"base\":\"/react/React好用的插件/\",\"items\":[{\"text\":\"js-pinyin\",\"link\":\"js-pinyin\"},{\"text\":\"jsbarcode\",\"link\":\"jsbarcode\"},{\"text\":\"react-jsx-parse\",\"link\":\"react-jsx-parse\"},{\"text\":\"react-load-script\",\"link\":\"react-load-script\"},{\"text\":\"react-to-print\",\"link\":\"react-to-print\"},{\"text\":\"react-viewer\",\"link\":\"react-viewer\"},{\"text\":\"react-hook-form\",\"link\":\"react-hook-form\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"},{\"text\":\"react-window-infinite-loader\",\"link\":\"react-window-infinite-loader\"}]}]},\"/typescript/\":{\"base\":\"/typescript/\",\"items\":[{\"text\":\"TypeScript\",\"base\":\"/typescript/\",\"collapsed\":false,\"items\":[{\"text\":\"Redux\",\"link\":\"Redux\"}]},{\"text\":\"TS 从入门到深度掌握，晋级TypeScript高手实战课程\",\"base\":\"/typescript/TS 从入门到深度掌握，晋级TypeScript高手实战课程/\",\"collapsed\":false,\"items\":[{\"text\":\"第10章TS声明文件，TS模块.md\",\"link\":\"第10章TS声明文件，TS模块\"}]},{\"text\":\"晋级TypeScript高手，成为抢手的前端开发人才\",\"base\":\"/typescript/晋级TypeScript高手，成为抢手的前端开发人才/\",\"collapsed\":false,\"items\":[{\"text\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\",\"link\":\"第07章 泛型类+泛型接口+泛型类约束的复杂应用【无比重要的深度技能】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"},{\"text\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\",\"link\":\"第09章 深入infer、TS高级类型、泛型再进阶【全方位深度掌握 TS 泛型】\"},{\"text\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\",\"link\":\"第08章 深度掌握泛型函数、泛型函数重载【无比重要的深度技能】\"}]}]},\"/css3/\":{\"base\":\"/css3/\",\"items\":[{\"text\":\"现代web布局\",\"base\":\"/css3/现代web布局/\",\"collapsed\":false,\"items\":[{\"text\":\"Web 布局技术演进：了解 Web 布局发展史\",\"link\":\"01\"},{\"text\":\"现代 Web 布局技术术语\",\"link\":\"02\"},{\"text\":\"Flexbox 布局基础使用\",\"link\":\"03\"},{\"text\":\"Flexbox 布局中的对齐方式\",\"link\":\"04\"},{\"text\":\"Flexbox 布局中的 flex 属性的基础运用\",\"link\":\"05\"},{\"text\":\"Flexbox 中的计算：通过扩展因子比例来扩展 Flex 项目\",\"link\":\"06\"},{\"text\":\"Flexbox 中的计算：通过收缩因子比例收缩 Flex 项目\",\"link\":\"07\"},{\"text\":\"Flexbox 布局中的 flex-basis：谁能决定 Flex 项目的大小？\",\"link\":\"08\"},{\"text\":\"使用 Flexbox 构建经典布局：10 种经典 Web 布局\",\"link\":\"09\"},{\"text\":\"10\",\"link\":\"10\"}]},{\"text\":\"postcss\",\"base\":\"/css3/postcss/\",\"collapsed\":false,\"items\":[{\"text\":\"postcss-prefix-selector增加统一作用域\",\"link\":\"postcss-prefix-selector增加统一作用域\"}]}]},\"/electron/\":{\"base\":\"/electron/\",\"items\":[{\"text\":\"electron开发实战\",\"base\":\"/electron/electron开发实战/\",\"collapsed\":false,\"items\":[{\"text\":\"Electron 环境搭建+前期准备\",\"link\":\"electron环境搭建\"},{\"text\":\"开发一个简单版的番茄钟\",\"link\":\"开发一个简单版的番茄钟\"},{\"text\":\"APP特性\",\"link\":\"App特性\"},{\"text\":\"原生GUI\",\"link\":\"原生GUI\"},{\"text\":\"使用NodeJs调用原生模块\",\"link\":\"使用NodeJs调用原生模块\"},{\"text\":\"释放前端想象力\",\"link\":\"释放前端想象力\"},{\"text\":\"Electron优化白屏\",\"link\":\"electron优化白屏\"},{\"text\":\"Electron应用打包\",\"link\":\"electron应用打包\"}]},{\"text\":\"Electron数据持久化方案\",\"base\":\"/electron/数据持久化方案/\",\"collapsed\":false,\"items\":[{\"text\":\"electron-store\",\"link\":\"electron-store\"},{\"text\":\"数据持久缓存库lndb\",\"link\":\"数据持久缓存库lndb\"}]},{\"text\":\"react中开发踩坑\",\"link\":\"/electron/react中开发踩坑\"}]}},\"outline\":{\"level\":[2,6],\"label\":\"本页目录\"},\"docFooter\":{\"prev\":\"上一篇\",\"next\":\"下一篇\"},\"lastUpdated\":{\"text\":\"上次更新\"},\"returnToTopLabel\":\"返回顶部\",\"darkModeSwitchLabel\":\"外观\",\"sidebarMenuLabel\":\"归档\",\"editLink\":{\"pattern\":\"https://github.com/xxx\",\"text\":\"在 github 上编辑此页\"},\"search\":{\"provider\":\"local\",\"options\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true}");</script>
    
  </body>
</html>